Related: How to Embed Your YouTube Channel Video Player in a Static FBML Page
Related: Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML
As detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by using Facebook's proprietary FBML (Facebook Markup Language).
Recently, someone asked us how to embed video in a Static FBML page. Well, you can actually embed any Flash object using FBML, and it's pretty easy. Here's how it's done if you want to embed a YouTube video (Note: you can use this technique to embed any Flash object with the .swf extension).
PLEASE NOTE:
- Static FBML can only be used on Fan Pages, not Personal Profiles or Group pages.
- You can only use CSS and HTML in these pages, and FBML.
- Your video cannot start playing when the page loads. Facebook requires a user action (usually a click) to load Flash or run JavaScript.
- To position your video on your page, put the fb:swf code in a containing DIV, set to the width of the video, and position the DIV using CSS.
If you can't get this working::
- Check your URLs: Make sure the URLs to both the activation image (imgsrc) and the video or Flash object are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.
- URLs are case sensitive: All directory and file names after the domain name are case sensitive. One misplaced capital and it won't work!
- Close the fb:swf tag Make sure you have closed the <fb:swf> tag, with "/>" (without the quotes). If the tag isn’t closed, it won’t work.
- Make sure quotes match and are closed: It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width="xxx' ).
Embed a YouTube video using FBML
Here's the code you put on your Static FBML page:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />
Replace "xxxxxxxxxx" with the YouTube video ID, which is the string of characters after the "v=" in the URL in your browser's address bar (up to the "&" or anything following it, if you see that after the string of letters and numbers). For example:
http://www.youtube.com/watch?v=JOt2Qp0H9G8&feature=related
You would replace "xxxxxxxxxx" with "JOt2Qp0H9G8" in both places, resulting in:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'
imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' width='340' height='270' />
You can also change the values for "swfbgcolor" and "imgstyle" to your preferences.
The value "swfsrc" is the absolute URL to the Flash file you want to embed (YouTube videos are in Flash format).
The Preview / Activation Image — imgsrc
Facebook requires a user action (usually a click) to trigger Flash or JavaScript to run. There is no way around this requirement. The "imgsrc" image is the image the user will see in place of your video. When s/he clicks the image, your video loads.
To eliminate a second click to start the video after it loads, try setting your video to autoplay so that it plays immediately when the user clicks the activation image. You do this by appending "&autoplay=1" to the swfsrc URL:
swfsrc = 'http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1'
The value "imgsrc" is the preview/activation image. The YouTube thumbnails are small( usually 120x90 pixels), so you don't really want to use those for your activation image.
You can change the "imgsrc" URL to point to any image online, so you should probably create your own image at the 340x270 dimensions (or whatever dimensions you wish — the 340x270 is just an example), upload it to your server (or use an image hosting service like Photobucket to host your images).
On your Fan Page, an image appears first (the value of "imgsrc"). When the user clicks the image, it turns into the Flash object.
Positioning / Aligning your Video on the Page
If, for example, you want to center your video/Flash on the page, you need to put it inside a containing DIV and position the DIV using CSS, as in this example using the width of 492 pixels:
<div style="margin:0 auto; width:492px;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI='
imgsrc='http://www.hyperarts.com/facebook/_img/click-to-play.gif' width='492' height='391'/>
</div>
The "margin:0 auto" centers the containing DIV on the page. You can set the top and bottom margins to whatever values you wish, but the left and right values have to be set to "auto" to center the DIV.
The above is ONLY an example; set the values appropriate to your video/Flash.
Feel free to ask questions via comments, and I'll try to help.
More resources:
Facebook Developer Wiki on Embedding Video



#1 by Dr. Alan Weinstein - July 22nd, 2010 at 18:57
I had not problem getting the youtube video into my FBML page. The problem is that after the video plays there is a selection of videos under it that are not mine and I don't want them on my fanpage. Any suggestions?
#2 by Chase Brumfield - July 27th, 2010 at 12:13
I think you have to go to youtube where you uploaded the video... and then uncheck the "play related videos" option... or it's an option that says something like that.
Hope this helps...
#3 by Matthew Urmenyhazi - August 22nd, 2010 at 15:15
I had this problem too, but found the perfect solution. I've taken this extract from YouTube's help section...
The parameter for disabling related videos for a video in the YouTube embedded player is "&rel=0". By adding "&rel=0" to the end of the video ID in the embed code, you'll prevent related videos from showing in the player.
#4 by Chase Brumfield - July 25th, 2010 at 10:15
So I've added a video and video image to a test facebook page to try to get this right. Everything works well except when I click the test image the video pops up at the bottom instead of where the image is... here's the link to the page so you can see what I'm talking about... it's the "welcome" tab at the top...
http://www.facebook.com/pages/Test-Page-TGP/109336825785273?v=app_4949752878&ref=search
And here's the code that I've used...
All help is greatly appreciated...
Thanks,
Chase Brumfield
#5 by Chase Brumfield - July 25th, 2010 at 10:16
Whoops... forgot to add the code I guess?
#6 by Chase Brumfield - July 25th, 2010 at 10:16
Code doesn't appear when I wrap it in the code tags so i'll just paste it this way
#7 by Chase Brumfield - July 25th, 2010 at 10:17
ok no matter how i try to put this code in it doesn't show up ;( ?
#8 by computerzworld - July 29th, 2010 at 07:56
Hi,
I am trying to integrate youtube video in my fbml page along with full screen button using parameter fs=1 but when I click on full screen button nothing happens. What should I do in this case? Please help me. I tried with static fbml & application page.
#9 by Walt - August 2nd, 2010 at 12:51
Hi - I would like to know, while trying to embed a video into my static fbml image following your directions, how do I get the video to sit in the perfect place that I have design the image for it to sit into? I have a square area within my design for the placement of the video, how to I get the video in the correct placement? Thanks!
#10 by timware - August 2nd, 2010 at 13:01
You'll need to have CSS knowledge sufficient to be able to position an element. The fb:swf code should be placed in a DIV and then you need to position that DIV with CSS. You can learn about HTML & CSS at W3 Schools.
#11 by @scottayres - August 5th, 2010 at 22:39
Is there not a simple code you could provide or point us novices too that would show us how to do this? Seems like it would be something standard that could be copied just like the code you provided.
#12 by timware - August 6th, 2010 at 11:02
I've added this, Scott. Check out the above instructions, under the "Positioning / Aligning your Video or Flash".
#13 by Walt - August 2nd, 2010 at 13:31
Thank you!
#14 by suddenstealth - August 4th, 2010 at 17:00
I was able to get the youtube video on my fbml page, but I cannot get it to go full screen. Any ideas?
#15 by timware - August 5th, 2010 at 05:48
I don't believe it's supported. You can append "&fs=1" to the swfsrc URL and this results in the 4-arrow icon for full screen displaying, but it doesn't function.
#16 by frank - August 5th, 2010 at 06:58
Hi, this is a great post, I do have one question:
Is it possible to have the video play as soon as the person clicks the image? Right now the placeholder image shows up, the user then clicks that image and that image is replaced by the YouTube player image, then the user has to click again to play the video. Can the video play with a single click?
Thank you!
#17 by timware - August 5th, 2010 at 07:03
Facebook requires a user action before running Flash or JavaScript. There's no way around this. Set your video to autoplay to have the video play after the user clicks the activation image.
To set to autoplay, add: &autoplay=1 to the end of the swfsrc URL. If it doesn't autoplay after doing this, then the video may be hardcoded to not autoplay.
#18 by frank - August 5th, 2010 at 08:28
That worked perfectly! Thank you!!
#19 by Tracey Tarrant - August 5th, 2010 at 07:33
Love your site...tons of very valuable info here. How do I center the video using the code you provide?
#20 by timware - August 5th, 2010 at 07:50
Hi Tracey, Many people have asked this question so I've added instructions for positioning the video on the page to this post. Basically, you put the fb:swf code inside a container DIV and position that DIV with CSS.
#21 by Tracey Tarrant - August 5th, 2010 at 07:59
Thanks Tim I missed that.
#22 by Hi - August 5th, 2010 at 07:35
mind if you tell me the code that you use? you can message me in my facebook maqute17@yahoo.com
#23 by Tracey Tarrant - August 5th, 2010 at 07:59
One more question...how do I get the video to start on the play button rather than just show a random picture? Here's what I'm referring to:
http://www.facebook.com/TeensTransformingTowns?v=app_6009294086
#24 by timware - August 5th, 2010 at 08:10
Read the post, Tracey. Try using autoplay, as described above.
#25 by Subail Sunny - August 7th, 2010 at 09:38
hello,
i have a problem. i have added the video following the instruction mentioned above.but there is a problem.when i click the image, width of the video player is expanding. and also height is reducing.i have added the image 640*480 px. when i click on the image,the video player size becomes about 720*300px(not perfect measurement of size.).here is my code:
<div style="margin:0 auto; width:492px; background-image:url(http://www.wallcoo.net/animal/farm-animal/m01/funny-farm-animals-34.jpg); background-repeat:no-repeat;">
<center>
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px;" border-color:white;" swfsrc='http://www.youtube.com/v/RY9BLioRJe4' imgsrc='http://www.thefunnybox.com/wp-content/uploads/2009/01/funny-picture-photo-sign-ninjas-lockergnome-pic.jpg' />
</center>
<form action='http://tmel.org/contact.php' method='post'>
<div>
<label for='signup_name'>Name</label><br />
<input id='signup_name' name='signup[name]' type='text' /><br />
<label for='signup_email'>Email ID</label><br />
<input id='signup_email' name='signup[email]' type='text' /><br />
<label for='signup_phone'>Phone</label><br />
<input id='signup_phone' name='signup[phone]' type='text' /><br />
<input class='signup_phone' name='commit' type='submit' value='Sign Up' /><br />
</div>
<form/>
</div>
#26 by Subail Sunny - August 7th, 2010 at 09:48
ooops....i forgot to add the height and width portion.....solved by my self. thank you for the tutorial.
#27 by Serdar ALKAN - August 8th, 2010 at 17:00
hello,
i have a problem , too...
i can see picture but after click i cant see my flash menu. please help me what is the problem
thanks
codes here:
<!-- s.a. flashmenu -->
<div style="margin:0 auto; width:180px;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.ucuztatilsenligi.com/facebookdeposu/flashmo_113_vertical_01.swf'
imgsrc='http://www.ucuztatilsenligi.com/facebookdeposu/menuresimi.JPG'
width='180' height='400' />
</div>
<!-- s.a. flashmenu sonu-->
#28 by timware - August 8th, 2010 at 17:49
I check everything out & it seems fine. I'm really not sure why the Flash doesn't load after clicking the activation image. Perhaps there are flashvars needed to run the Flash? You might need those flashvars laid out via the: flashfvars="FLASH VARS" parameters. More here: http://developers.facebook.com/docs/reference/fbml/swf
#29 by Carolyn - August 10th, 2010 at 07:55
OK so 3rd time lucky sorry for clogging up the page. I'm just so coded out I'm starting to see double!
Please Help (as you can see I need it! lol) OK I have watched your tutorial & read your how to, but I will be damned if I can get the bloody thing working! Could you please please help me!
Here's what I copied of your tutorial:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/xxxxxxxxxx' imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />Here's our Toutube vid url:
http://www.youtube.com/watch?v=6D0lXHdzCEoSo I Did:
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/6D0lXHdzCEo' imgsrc='http://i779.photobucket.com/albums/yy78/scruffles4/CandMfbWelcome.png' width='340' height='270' />It doesn't work! What am I missing?
#30 by timware - August 10th, 2010 at 09:28
You're missing spaces between parameters. When you copied and pasted my example code, you lost the linebreaks and everything runs together. Example:
<fb:swfbgcolor="000000"
should be
<fb:swf
bgcolor="000000"
Make your code like this:
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/6D0lXHdzCEo'
imgsrc='http://i779.photobucket.com/albums/yy78/scruffles4/CandMfbWelcome.png' width='340' height='270' />
and it'll work. I tested it.
#31 by Christopher Smith - August 16th, 2010 at 02:30
Hi,
I have got a Problem with the following Javascript on a Static FMBL on a Fanpage:
<a href="#" onclick="if(document.getElementById('div1').style.display=='none') {document.getElementById('div1').style.display='block';} else {document.getElementById('div1').style.display='none';}">Klick</a><span id="div1" style="display:none;">content</span>
#32 by timware - August 16th, 2010 at 08:14
I would suggest you use FBJS and the "clicktoshow" and "clicktohide" features. I can't troubleshoot your JavaScript.
#33 by Christopher Smith - August 16th, 2010 at 08:36
thank you i have got the correckt code no
if(document.getElementById('div1').getstyle('display')=='none'){
document.getElementById('div1').setstyle('display', 'block'; } else { document.getElementById('div1').setstyle('display', 'none'; }
#34 by Uns - August 18th, 2010 at 04:01
I can see the image but when I click on it, the video does not come up. I have it in a FBML box. Any clues gratefully received!! Its a widescreen video, will the new FB page sizes affect this??
<fb:swf
swfbgcolor='000000'
imgstyle='border-width:3px; border-color:white;'
swfsrc='http://www.youtube.com/watch?v=WKXEnRVeBo4&autoplay=1'
imgsrc='http://www.rallyforlife.net/Why_Stillimage.jpg'
width='600' height='385'
/>
#35 by timware - August 18th, 2010 at 06:58
You're link goes to the YouTube PAGE and, as this tutorial makes clear, you need to get the URL from the EMBED CODE. Also, you better reduce that width to 520px or less because the right 80px will get cut off beginning August 23.
#36 by Uns - August 18th, 2010 at 07:23
Thanks so much Tim,
I've tried this code from the embed code (hard to tell where it stops)
'http://www.youtube.com/v/WKXEnRVeBo4?fs=1&hl=en_US&rel=0'
And I've tried this
'http://www.youtube.com/v/WKXEnRVeBo4?fs=1&'
But neither seem work. I've reduced the size of the video as you suggested!
#37 by timware - August 18th, 2010 at 07:31
I just tested the original code you sent, with the 2nd of the two URLs you just sent (both work):
<fb:swf
swfbgcolor='000000'
imgstyle='border-width:3px; border-color:white;'
swfsrc='http://www.youtube.com/v/WKXEnRVeBo4?fs=1&autoplay=1'
imgsrc='http://www.rallyforlife.net/Why_Stillimage.jpg'
width='600' height='385'
/>
It worked fine.
#38 by Uns - August 18th, 2010 at 07:35
Thanks so much Tim! I was using the video image -
imgsrc='http://www.youtube.com/vi/watch?v=WKXEnRVeBo4'
so that must have been causing the problem
#39 by kristal - August 20th, 2010 at 14:33
thank you for posting this
i need help i post my video but the image doesnt show it has that " broken file image " with the little paper ripped ,
but when i click the video the video shows ... help i want it so others may see what they are viewing .. thanks
#40 by timware - August 20th, 2010 at 14:59
It sounds like the URL to your image is incorrect. Check it directly in your browsers.
#41 by zac - August 20th, 2010 at 15:19
Hi,
THanks for all of your great articles. Very helpful. I am baffled with this though as I am getting the Upgrade Your Flash Player message with the video. I know I am running the current flash but I tried an upgrade anyways but the message still comes. Anyone else experiencing this or know what may be the cause?
#42 by Matthew Urmenyhazi - August 21st, 2010 at 13:44
Hi this is a fantastic tutorial! Many thanks!
I have a quick question though. My YouTube video is 580x360p yet Facebook requires an image with a width of 520 pixels.
My image gets cut off if it's 580 pixels wide (but isn't squashed) or squashed if I make it 520.
Any ideas?? Thanks again!
#43 by Disco Ninja - August 22nd, 2010 at 10:14
How do I make the details column on the left disappear in my Static FBML tab?
Like in this example:
http://www.facebook.com/pages/Test-Page-TGP/109336825785273?v=app_4949752878&ref=search
#44 by timware - August 22nd, 2010 at 15:29
Tabs are shrinking to 520px. If you admin a tab, you're seeing already. You can't get rid of it. There are numerous posts on this blog about this and if you want to maintain a fan page, you best keep up with the ever-changing Facebook.
#45 by Matthew Urmenyhazi - August 22nd, 2010 at 15:11
Woops, I've just realised that I can change the dimensions of the video to 520 in YouTube.
#46 by Chucho - August 30th, 2010 at 23:54
Mr. I have a problem, when I click on my video, it shows. but in other place, afar from the image. I need reproduce the video at the same margin of the image.
Regards..
#47 by Nicole - September 2nd, 2010 at 07:14
Hi there,
Just realised ive mafe my video in the 640 by 385 ratio but i need it to fix in the 520. Can I just alter the width in the code or will it shrink/crop it?
#48 by timware - September 2nd, 2010 at 08:31
Just set the height/width parameters to 520px x 313px and it will display in full at that size.
#49 by Nicole - September 2nd, 2010 at 08:34
Hi there,
Put in those details and it worked alright, however I was left with a little bit of black border on the left and right so 318 for the height looked better!
Thanks for all your help!
#50 by Sriya - September 4th, 2010 at 04:54
I was trying to have an swf object and few images (from youtube's video) below that. What I want is, when a user clicks on any image, the corresponding video will be loaded in the swf objec on the top. I am not able to do this using FBJS. Can U help?
The page I am referring is at http://www.facebook.com/pages/BM/104957559562687?v=app_4949752878
#51 by Kristin Moore - September 4th, 2010 at 20:34
When you described "Position/Aligning your Video on the page above, you indicated that you can set the top and bottom margin to whatever we like. Will this allow us to position the video on top of an image we've already placed? If so, what is the code to specify top and bottom margin. Thanks so much for all the great info!!
#52 by Lori - September 5th, 2010 at 16:50
Would you consider doing a tutorial for embedding a CoolIris wall in a Facebook tab? I've embedded them in a website, but I'm unfamiliar with FBML.