Social Sharing Overlay

This guide explains the features and options of the Social Sharing overlay, used by viewers to share videos on Twitter, Facebook, Email or Blogs.

This document applies to users of JW Player Pro, Premium and Enterprise. Don't have Pro? Upgrade Now.

Introduction

The sharing overlay of JW Player provides a dialog window that can contain:

  • An embed code field, displaying the video embed code.
  • A video link field, displaying the URL of the page that embeds the video.
  • Buttons for sharing through Facebook, Twitter and Email.

Users can activate the overlay by clicking the Video Sharing button in the top left of the display. Here is a screenshot of the overlay in action:

 

If the overlay is activated while the video is playing, playback is automatically paused. Users return to the video by clicking the top-right "X" (or anywhere else outside the overlay).

Configuration Options

The sharing functionality is activated by setting the sharing configuration block. Inside this block, the following options can be set. They are all optional:

link
URL to display in the video link field. If no link is set, the URL of the current page is used. Example:
http://example.com/videos/12345/
code
Embed code to display in the embed code field. If no code is set, the field is not shown. Example:
<iframe 
  src="http://example.com/12345.html"
  width="480" 
  height="270" 
  frameborder="0"
  scrolling="auto" />
heading
Short, instructive text to display at the top of the sharing screen. The default is Share Video. Also is displayed as a tooltip for the sharing icon.

Since the embed code may contain special characters like <, " or &, you should URIEncode the string in the embed code of your player. The JW Player will automatically decode your string when it is loaded. The example below shows how to do so.

Example Setups

Here is a basic setup example of a player using the sharing plugin. Since no options are provided, the sharing overlay displays only the link and buttons, using the current webpage:

<script type="text/javascript">
  jwplayer("container").setup({
    file: "/uploads/video.mp4",
    sharing: {}
 });
</script>

Here is another, more extensive setup - the one displayed above. It sets a custom embed code and video link. Again note that the code is URI encoded, so the browser will have no trouble displaying the code:

<script type="text/javascript">
  jwplayer("container").setup({
    file: "/uploads/video.mp4",
    sharing: {
      code: encodeURI("<iframe src='http://example.com/embed/12345.html' />"),
      link: "http://example.com/page/12345/"
   }
 });
</script>

See the MP4 Video Embed example for more details on embedding.

Media ID Replacement

When using a playlist containing multiple videos, it is possible to set distinct sharing links per item. Therefore, use the string MEDIAID in the code and/or link configuration options. JW Player will, for each video in the playlist, automatically replace the MEDIAID string with the actual mediaid of the video. Here is an example embed:

  jwplayer("container").setup({
    playlist: [{ 
       file: "/videos/12345.mp4",
       mediaid: "12345"
    },{
       file: "/videos/67890.mp4",
       mediaid: "67890"
    }],
    sharing: {
      code: encodeURI("<iframe src='http://example.com/embed/MEDIAID.html' />"),
      link: "http://example.com/page/MEDIAID/"
   }
 });

Again, note that Social Sharing is only available in the Premium and Ads editions of JW Player.

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here