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
2 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.