Custom video player on Facebook

There are 72 comments.

Custom video player on Facebook

Embed your own video player on Facebook

Facebook and the Open Graph Protocol allows you to define special meta data on your web pages that defines them in Facebook’s social graph. In this post i’ll show you how to set up the meta tags required for you to use a custom video player on Facebook, styled exactly like you want it. It will show up, and play, directly within Facebook status updates whenever someone shares the web page containing that meta data. Pretty cool, huh?

iPhone and iPad support

This method allows for HTML5 fallback which makes the video work on iPhones, iPads and other non-Flash devices. Even inside the native Facebook iPhone app — My example is set up with a HTML5 fallback to show that functionality.

Step 1: Prepare your flash video player

There are two ways you can go here:

  1. Set up your video player to accept a flashvar with the URL to the video file.
  2. Hard-code the URL into the source code of the flash player, so that it keeps track of it internally.

Naturally, going with flashvars is much more dynamic, as you can use the same video player with different video’s if you have more than one on your website. In my example I’ve used the flashvar “url” to supply the video file URL.

Learn how to use flashvars in this video tutorial by Lee Brimelow

Step 2: Utilize Open Graph tags

I’ve put up an example at http://ahrengot.com/playground/circular-scrubbing that has the correct meta tags. If you post the URL to Facebook you’ll see the player embeds correctly. You can view the source and look out for the open graph tags. In my example they are as follows:


<!-- Open Graph tags -->
<meta property="og:title" content="Circular scrubbing video player" />
<meta property="og:description" content="A video player interface experiment, which features circular scrubbing and a very minimal design." />
<meta property="og:type" content="video" />
<meta property="og:url" content="http://ahrengot.com/playground/circular-scrubbing"/>
<meta property="og:image" content="http://ahrengot.com/playground/circular-scrubbing/thumb.jpg"/>
<meta property="og:site_name" content="Ahrengot's Playground"/>
<meta property="fb:admins" content="100000936142315"/>

<!-- Video player specific OG tags -->
<meta property="og:video" content="http://ahrengot.com/playground/circular-scrubbing/video-player.swf?url=http://ahrengot.com/playground/circular-scrubbing/assets/video/example.mp4" />
<meta property="og:video:width" content="374" />
<meta property="og:video:height" content="202" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

The tags are quite self-explanatory, but if you need any help, refer to the documentation.

View on Envato

That’s it – If this was of any help to you, or you have any questions, I’d really appreciate your feedback in the comments. Oh, and if you like the video player in my example it’s available on Envato marketplaces: Video player with circular scrubbing.

← Older Comments
  • Donatas

    Got it, thanks Jens

  • Donatas

    That means, that if using a 3rd party video player, then there is no way to track? Is that right?

  • http://ahrengot.com/ Jens Ahrengot Boddum

    There might be, but that really depends on the player.

  • Elena

    Guys!
    I really need some help in here!
    I am trying to follow the link for filling in the white listing request, but i only find a facebook help center page (where there is nothing like request form exists)
    What do I do?

  • Donatas

    You do not need to whilelist anymore? Forget that.

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Correct. I’ve just removed that step from the article to prevent further misunderstandings. Thanks Donatas.

  • http://www.facebook.com/pages/mycomputerguyie/209896455746224?sk=app_7146470109 Niall

    I’m using a template for an online store but the content doesn’t load once the image is clicked. I’ve tried everything that Google can reveal to get it working but to no avail. Here’s the link: http://www.facebook.com/pages/mycomputerguyie/209896455746224?sk=app_7146470109

    Any help massively appreciated.

  • MyVWL.COM

    I am trying to make the video and mp3 players to embed on facebook. I do understand most of whats in the discussion. Here check out what I am working with and any help would be great.
    http://www.myvwl.com/m/sounds/view/Kevin-Costner-Tribute-to-Whitney-Houston

  • Khas

    Thanks! You’re the man!! :D

  • http://jehzlau-concepts.com Matha Aravjo

    Cool design. Did you make this site yourself?

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Yup – You can find it right here

  • Eivind

    Hi Jens,

    How would your approach be to embed a media player that uses a json playlist for media files?

    Best
    Eivind

  • http://butikonline.net Raymond Flanary

    clearly explained thumbs up.

  • John Mark Ellsworth

    This is what I want: “It will show up, and play, directly within Facebook status updates whenever someone shares the web page containing that meta data.”

    I have tried… but I am not getting it to play directly in facebook, and that is what I want to happen. Here is my video page: http://icomets.org/football-vid/2012.html . When I paste that link into facebook, facebook simply treats the URL as a regular link… with no thumbnail, no way to play the video… sure, I can click the link, leave facebook, and play the video on my page… but I want to be able to play the video directly in facebook.

    I am reading some of the comments about https. But it does not appear the example provided by Jens uses https. I would rather not since that involves more finagling. Or at least have more instruction on how to do the https part.

    Please help.

  • John Mark Ellsworth

    Still in need of help…

    But here is some more information.

    So, based on the issue potentially being the location of the swf player, I tried the following: . It worked. Notice I am not using *my* player, but playing my content. It now posts on facebook as desired. So as long as Jens does not move his player, I am good. (I did buy his player, but it does not work… maybe it is the location issue… but his does not appear to be on an https, so who knows?)

    Another question… I want it to autoplay once someone clicks the thumbnail pic. Right now, it appears that one has to click the thumbnail AND then click play once the player opens. Autoplay is set to true on the page, but it does not seem to read it when going through facebook. Any thoughts? Anyway to get the autoplay on facebook once they click the thumbnail? (See what I am talking about at http://www.facebook.com/glfootball/posts/286623678100835 )

    And, any ideas why the video player swf works for Jens on a non-https site but will not for me?

  • http://blog.wildtrip.net j0k

    Hi there, this solution doesn’t work anymore right ? It gave me : http://cl.ly/392U1Z0h0f1S1m0Y2w3Q

    • http://ahrengot.com/ Jens Ahrengot Boddum

      As VC mention above, this has to do with the secure browsing option on facebook. My domain isn’t SSL so it bugs out when that setting is activated.

  • http://icodethings.tumblr.com/ Yuval

    Someone correct me if I’m wrong, but
    MP4s playing directly on the Facebook app in an Iphone no longer works (since a few months ago…) –
    HTTPS or HTTP, in both cases – on the Iphone FB app – you’ll see a thumbnail and text (with no ‘play’) – and a click we’ll redirect to the url on your opengraph tags.

    This happens with YouTube videos and Vimeo videos as well… so I guess that’s it for inline-video playing within FB on Iphone for now…

    [unless someone will dig-up a new trick... :) ]

  • http://michaelylanan.site11.com Ylanan

    Hi,

    great article and informative. I the same issue. I have wordpress site and my logo, post images and video post are not detecting on facebook. my question where to do I put these meta tags on my wordpress site to properly detect on facebook?

    I tried to post: http://michaelylanan.site11.com/video/html5-basics-htmlcss-part-1-of-2.html

    but not detecting.

    Thank You

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Hey Ylanan!

      You need to put them within the section of the website just as mentioned in step 2 above.

  • http://www.stonesthrowchurch.org Jeremy

    Hey, great article. I have all these .mov files on my site and I wanted to add these tags so they could play on Facebook. I bought your Flash player mentioned in the article since I didn’t have one. The player seems to work fine when I go right to it, but it’s not playing on Facebook. It shows the description and title just fine, but when I click on the thumbnail image on Facebook it just takes me to my site instead of playing the file. Any ideas? Check out the link http://stonesthrowchurch.org/new/media/mark/hypocrisy for an example.

    • http://ahrengot.com/ Jens Ahrengot Boddum

      In the source code, take a look at line 17 with the og:video tag. That url isn’t very web-friendly and might be why it’s behaving stragely.

      • http://www.stonesthrowchurch.org Jeremy

        Hey, thanks for the reply. I thought that may be the issue, but I had planned on reorganizing the entire media library for more URL friendly names anyways. If you check out http://stonesthrowchurch.org/media/mark/hypocrisy you’ll see what I mean. It should work. I really can’t figure this one out…

        • http://ahrengot.com/ Jens Ahrengot Boddum

          Strange, I cant seem to immediately find anything that would cause your videos not to work. Have you tried a smaller size? Your current meta tags define a size of 736x414px. Perhaps that’s too large for facebook walls.

          I also notice they’ve moved around their documentation a lot. I’ve updated my link above with this one, which might be more helpful: http://developers.facebook.com/docs/opengraph/define-objects/#video

          • http://www.stonesthrowchurch.org Jeremy

            I went ahead and tried that. Re-encoded the video to make it 480×270. Still no luck. Tried a myriad of other things including adding some legacy link tags. Strange thing is if I change the og:video content link to simply “www.youtube.com” it’ll display the thumbnail with the play button correctly. It obviously won’t play anything when you click it since that’s not a URL of an actual video, but it’s weird it would display it as a video. That made me think I might be missing some meta tags at the root level, but even after I added them still got nowhere. Even tried it on my other domain and nothing. Oh well, think that’s about all the time I have for that adventure! Thanks for reading!

  • http://ahrengot.com/ Jens Ahrengot Boddum

    This is strage. Running it through Facebook’s URL debugger doesn’t give any warning either.

  • http://www.sparkfiredance.com Dan

    Also not getting this working on http://www.sparkfiredance.com
    or
    http://www.sparkfiredance.com/2012/mtv

    Any advice?

  • Pedro

    Your video is not recognized on facebook : (

  • http://www.facebook.com/revcbh Rev. C. Bennett Hoffman

    If you’re curious, the demo is failing because a request to the page without a trailing slash yields a 301 redirect to the same url with a trailing slash. The element specifies the url without a trailing slash.

    So, when you request without the slash, you get redirected and the url doesn’t match the value in . When you request with the slash, facebook checks , since it’s different it tries for that address (without the slash, again) and you get a redirect loop.

    Please ignore the closing tags that the editor things it needs:

  • Kalpesh Rajvir

    there is Secure Browsing setting needs to be fixed in the account> security settings to get this working in FB.

← Older Comments