Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

A number of people have asked how to add multiple videos to their Static FBML tabs, and have them display in rows, side by side.

Of course, you can create a YouTube channel or playlist of videos and embed that in your Static FBML tab, but if you want to show individual videos (or Flash) on your Static FBML tab, and be able to have them align horizontally, here's how:

Displaying multiple videos in a row in Static FBML

In my example, each row will be inside the "multivideos" DIV and contain the two videos, each in a separate DIV. I recommend limiting the width of your videos to 250 pixels so that two can fit inside a 520-pixel container (the anticipated new maximum width of application tabs, such as Static FBML).

If you want more videos in a row, you'll need to adjust the width of the videos, as well as change the width values of the CSS classes.

As shown in the code below, you need to first create a few CSS classes which you will set in your tab:

To get the correct URL for the YouTube video, just navigate to the video's page on YouTube, then click the "Embed" button, which is below the video:

Copy the value from the embed code:

Setting the videos to autoplay when activation image is clicked

If you want to set your video to autoplay after the user clicks the activation image, add "autoplay=1" after the "&" at the end of the video's URL (if there's no "&", add "&autoplay=1"), as in my example code.

Of course, you can, and should, choose a different activation image for your video.

The Video Rows Code

Here is the code, which will work as-is if you paste it into the "FBML" box in your Static FBML tab. You can simply change the "swfsrc" value to point to the video you wish to embed.


<style type="text/css">
.videorow { width:520px; clear:both; margin-bottom:5px;}
.video1 { float:left; width:250px;}
.videos { float:left; width:250px; margin-left:5px;}
.clear { font-size: 1px; line-height: 1px; height: -1%; clear:both; }
</style>
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/qrO4YZeyl0I&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='150' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/1mB0tP1I-14&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='150' />
</div>
<p class="clear"></p>
</div> <!-- END videorow -->
<div class="videorow">
<div class="video1">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/bESGLojNYSo&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='200' />
</div>
<div class="videos">
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/-7NoOhmVMac&hl=en_US&fs=1&autoplay=1'
imgsrc='http://i567.photobucket.com/albums/ss117/hyperarts/click-to-play.gif' width='250' height='200' />
</div>
<p class="clear"></p>
</div> <!-- END multivideos -->


You can see the above example here. (For an "interesting" experience, I recommend playing all four at once!)

Calculating video dimensions for best display of videos and activation images

Most YouTube videos are either 640 x 385 pixels or 480 x 385 pixels. You will need to scale the width and height values in your fb:swf so that the videos and the "activation" images (imgsrc) aren't distorted by having the wrong aspect ratio (ratio of width to height).

In my example, I placed the two 640 x 385 videos in row one and the two 480 x 385 videos in row two, for a better visual display.

I also used a generic "click to play" activation image which I uploaded to Photobucket's image-hosting service. If you don't have access to a Web server to which you can upload images, Photobucket is a great alternative.

For additional instructions on adding YouTube videos or Flash to Static FBML, check out our tutorial.