How to Play YouTube-Style Flash Videos in Facebook
December 30, 2007
Displaying Flash videos, such as those found on YouTube, Metacafe, or CollegeHumor, is usually a simple task thanks to the readily available “embed code” provided by these websites. However, in order to ensure that embedded Flash media enforces site standards both internally and on developers’ applications, animations must be sanitized with one of several FBML tags, adding a bit of complication to the mix.
Normally, embed code on a site like YouTube can be copied in a format similar to the following. (Note that the below HTML is typically displayed as a single condensed line of code; however, it has been split into multiple lines here to improve readability.)
<object width="425" height="355"> <param name="movie" value="http://www.youtube.com/v/dMH0bHeiRNg&rel=1"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/dMH0bHeiRNg&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed> </object>
This code works flawlessly for most Web browsers as is, producing the Flash video below.
In order to display this same video in a Facebook canvas page, however, the FBML tag fb:swf must be used.
Getting started with the basic fb:swf usage is relatively simple. The only required attribute is “swfsrc”, which defines the remote location from which the Flash file will be loaded. For rendering YouTube videos, the value of this attribute must be set to the object parameter value whose name is “movie” from the provided embed code. Using the above example, swfsrc must be set to “http://www.youtube.com/v/dMH0bHeiRNg&rel=1″. With this, the FBML output should appear as follows.
<fb:swf swfsrc="http://www.youtube.com/v/dMH0bHeiRNg&rel=1"/>
By default, a Flash animation will be included at a size of 240 pixels wide by 200 pixels high. Your application might require a bigger size or perhaps even a smaller size. However, for the sake of learning, let’s simply assume you would like to use the standard YouTube video size.
In the original embed code copied from YouTube, the width and height dimensions are defined as 425 and 355 pixels, respectively. As such, the FBML will need to be updated to include these values for the optional width and height attributes.
<fb:swf swfsrc="http://www.youtube.com/v/dMH0bHeiRNg&rel=1" width="425" height="355"/>
Now your application should display the video as seen on the YouTube website or in the same manner it would display when using the embed code on a typical website.
Comments
8 Responses to “How to Play YouTube-Style Flash Videos in Facebook”
Got something to say?
Is there any way to have all the videos of a youtube user be displayed in a facebook app, or subscribe your app to their channel?
Yes, you can use Google’s new YouTube API:
http://code.google.com/apis/youtube/overview.html
Simple retrieve the collection of videos based on username.
The friend recommended recently a good free web hosting, all the same the best service among the free!
i made a FBML tab in my facebook page.
and add the script in the edit form just like u wrote..
and i try to resize the video.
so the script become this :
but it can’t appear in my FBML tab.. :(
upz..
Hi Matt, thanks fot the tutorial.
Now I have thi issue: the video doesn´t display, the content of the page looks blank.
But if I click over the are the video is supossed to appear, then it shows and plays!
Same happens with Firefox and IE.
Could you help me please??
thanks!!
Sil - I had that problem and it was because the end tag was missing - once I sorted that it was all good. So make sure you end your code with an end tag - ie: /fb:swf (enclosed in of course - I didn’t here as I don’t think this blog accepts code posts).
Cheers
Jayc
Another thought is the code needs an image to show - so add a thumbnail to it
eg: imgsrc=’http://yourdomain.com/images/tumb.jpg’ width=’415′
height=’336′
Cheers
Jayc