Sharing Video with THEOplayer

There are some kinds of content you just want to distribute to a as high number of users as possible. The easiest way to do this, is by allowing the content to be shared on social media such as Facebook, Twitter, Tumblr or email. In order to make this easier, you can configure THEOplayer to show social sharing buttons directly in the video player.

THEOplayer presents this functionality in two options, either by adding a social sharing button in the control bar, which allows you to show and hide the social sharing buttons, or by always showing the social sharing buttons in case of user activity.

Support is available for following sharing options:

  • Facebook
  • Twitter
  • Tumblr
  • Email
  • Permalink

Configuration for Social Sharing

Basic Configuration

This feature can be configured easily by setting the URL which should be shared on social media in a configuration parameter.

theoplayer = {
    "configuration" : {
        "socialSharing" : "https://www.myexamplewebsite.com/video/12345678"
    }
}

Advanced Configuration

Beside the basic configuration, you have to option to define detailed sharing information for each of the enabled social media, or to enable and disable specific social sharing options. An example configuration can be found below.

theoplayer = {
    "configuration" : {
        "socialSharing" : {
            "mail" : {
                "subject" : "I found a video I think you might like",
                "body" : "Hi, I found this cool video I think you might like: https://www.myexamplewebsite.com/video/12345678?mail"
            },
            "facebook" :  {
                // Your app's unique identifier. Required.
                "app_id" : "[Your Facebook app id]",
                // The link attached to this video. Required.
                "href" : "https://www.myexamplewebsite.com/video/12345678?facebook",
                // As defined by https://developers.facebook.com/docs/sharing/reference/share-dialog#params
                "display" : "page",
                // The URL to redirect to after a person clicks a button on the dialog. Required when using URL redirection.
                "redirect_uri" : "[Your Facebook redirect URI]"
            },
            "tumblr" : {
                "url" : 'https://www.myexamplewebsite.com/video/12345678?tumblr',
                "caption" : "This video is awesome! You should definately watch this."
            },
            "twitter" : {
                "text" : "This video made me laugh so hard!",
                "url" : "https://www.myexamplewebsite.com/video/12345678?twitter",
                "hashtags" : "awesome,haha"
            },
            "permalink" : {
                "url" : "https://www.myexamplewebsite.com/video/12345678"
            }
        }
    }
}

Using the Social Share Menu

By default, THEOplayer will show social sharing buttons upon user activity. As an alternative, you can hide the social sharing buttons in a menu button in the player's control bar. This can be done by adding thetheoplayer-show-social-sharing-button CSS-class to the video-element you are using for THEOplayer.

<video
    class="theoplayer-show-social-sharing-button"
    src="http://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8"
    poster="http://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg"
    controls="controls"
    preload="none">
</video>

Examples

Default Example

Below you can find an example of the social sharing feature with the social sharing buttons showing when the user is active.

var video = document.createElement('video');

video.controls = 'controls';
video.src = 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8';
video.poster = 'https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg';
video.preload = 'none';
video.style.width = '100%';
video.style.paddingBottom = '56.25%';

document.querySelector('.theoplayer-social-example').appendChild(video);

theoplayer(video, {
    "socialSharing" : "https://www.theoplayer.com/documentation/social-sharing.html"
});

Example using the Social Share Menu Button

Below you can find an example of the social sharing feature with the social sharing buttons which are displayed when opening the social share menu.

var video = document.createElement('video');

video.controls = 'controls';
video.src = 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8';
video.className = 'theoplayer-show-social-sharing-button';
video.poster = 'https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg';
video.preload = 'none';
video.style.width = '100%';
video.style.paddingBottom = '56.25%';

document.querySelector('.theoplayer-social-example').appendChild(video);

theoplayer(video, {
    "socialSharing" : "https://www.theoplayer.com/documentation/social-sharing.html"
});

Support Table

This feature is supported on all browsers supported by THEOplayer except for iOS.

Internet Explorer 10+

Internet Explorer 10+

Firefox

Firefox

Chrome

Chrome

Safari

Safari

Opera

Opera

Edge

Edge

Windows Phone

Windows Phone

Android

Android

Vivaldi

Vivaldi