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.
If you can’t get this working: PLEASE 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.
- You have closed the <fb:swf> tag, with />. If the tag isn’t closed, it won’t work.
- All quotes 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 value “imgsrc” is the preview image. This image is usually 120×90 pixels on YouTube, so when you set the width and height variables in the FBML markup, this image will not look so great because you’ll definitely want your embedded video to be larger than that. However, you can change the “imgsrc” URL to point to any image online, so you can create an image at the 340×270 dimensions (or whatever dimensions you wish — the 340×270 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.
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 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
#4 by Chase Brumfield - July 25th, 2010 at 10:16
Whoops… forgot to add the code I guess?
#5 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
#6 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 ;( ?
#7 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.