Custom video player on Facebook

There are 77 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.

  1. Elena said:

    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?

  2. Eivind said:

    Hi Jens,

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

    Best
    Eivind

  3. John Mark Ellsworth said:

    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.

  4. John Mark Ellsworth said:

    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?

  5. Yuval said:

    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... :) ]

  6. Jeremy said:

    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.

        • Jens Ahrengot Boddum replied with:

          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

          • Jeremy replied with:

            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!

            ·

  7. Rev. C. Bennett Hoffman said:

    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:

  8. Kalpesh Rajvir said:

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

  9. Jeremy said:

    I have no idea what happened, but I decided to try this again after spending dozens of hours on it when I last posted 9 months ago and suddenly it works! I don’t know if maybe I had borked something in the .htaccess file or if Facebook made some fixes, but in the end it doesn’t really matter.

    Was hoping you could do me a really big solid and make one small change to your flash player. I need to be able to specify a start index and end index in the flashvars so that I can post a “clip” of a larger file. Is that at all possible? I’d be happy to pay for the player again. Let me know!

    • Jeremy replied with:

      And just like that it stops working. Change nothing and now it doesn’t want to work. Even when I post links to the exact same URL that worked yesterday I get a image thumbnail instead of the video embed. I hate Facebook.

      • Jeremy replied with:

        Well, seems like the problem had to do with the Secure Browsing issue as other have seen below. Fixed it by making the link to the .swf file https (my webhost offers a shared SSL cert so it was pretty easy). I don’t know why it worked before as I haven’t touched my FB security settings ever, but that turned out to be the issue. Once again, I hate Facebook.

  10. Ana said:

    Hi Jens,
    Thank you for creating the video player. I purchased it from Activeden and was successfully able to set up to play in Facebook. However, once my video plays, the player remains gray. Is there a way to specify poster image via the flashvars passed in the URL? Thank you very much for the help!