• Lesson Index:
• Overview
• Table Structure
• Embedding the Video
• Dynamically Write Code
• Make Function Generic
• Rotating the Videos

Click books to buy from Amazon

Rotation of Videos using Javascript

Step 2: Embedding the Video

Picking this juggling video from YouTube.com, you see that on that video page on YouTube there is an "About This Video" box that give you an HTML snippet under the "Embed" field. The HTML snippet looks like ...

The videos on YouTube.com are Flash video in the SWF format. The above code is typical of how to display Flash content on a webpage. This code consists of an set of object tags and param tags which is used by Internet Explorer. It also consist of a set of embed tags which is used by Netscape and Firefox. In both set of tags, you will see that it reference to the Flash Video url (in our case it is http://www.youtube.com/v/AT-_2oAdN40) and to the height and width of the video. By adjusting the URL to the Flash video you can embed different videos. By appending &autoplay=1 to the end of the URL, you can get the video to autoplay as opposed to the default behavior where YouTube has a play button on which the user clicks to start to video. By adjusting the height and width values, you can resize the video to fit your space on you page. These are the max height and width that the video will size to. The video will also maintain its default aspect ratio that fits within that height and width.

In our videos.html file, we replace the "video here" placeholder text with the above HTML code snippet as shown and append the &autoplay=1 to both URLs.

Note that when you preview the file on your local disk, the video will not load. However, if you upload the file to your webspace, you will see that the video autoplay as intended.

View Live Code

Whether and how a SWF can be set to autoplay or not will depend entirely on how the video SWF is constructed.  The autoplay option indicated in the tutorial is the method to invoke autoplay on the YouTube video SWFs.  But other video SWF may not have that option or may require a different method of invoking autoplay.

For example, to make DailyMotion's video SWF play automatically, you would have to add the autoStart parameters as indicated...

Next Lesson: