Displaying multiple videos in a row in Static FBML

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

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:

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:

.multivideos (contains the individual videos for each row).video1 (contains the first video in the row)

.videos (contains additional videos in the row)

.clear (you need a “clearing” DIV after two or more floated elements – .video1 and .videos – in order for the .multivideos containing DIV to expand to accommodate the two floated DIVs inside it).

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>
<div>
<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>
<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></p>
</div> <!-- END videorow -->
<div>
<div>
<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>
<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></p>
</div> <!-- END multivideos -->

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: