How to embed multiple videos with iFrame

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to embed multiple videos with iFrame
You can use a single iFrame element to let your users view multiple videos without leaving your page. (Brand X Pictures/Brand X Pictures/Getty Images)

You can embed multiple videos into a single Web page. Rather than including a separate iFrame element for each video you want to include, you can use a single iFrame element and link multiple videos to it. This lets the user select one video at a time to play within the same video player on your page. To link multiple videos to an iFrame element, you need to include an anchor tag for each video you want to play. This method works for YouTube videos, which you can identify using the video ID string.

Skill level:
Moderately Easy

Other People Are Reading

Instructions

  1. 1

    Add a list to your page. Include an HTML unnumbered or numbered list inside the body section of your page as follows: <ul> <li></li> <li></li> <li></li> </ul>

    Add a list item for each video you want to include on your page. This code uses three list items for demonstration but you can include as many as you like.

  2. 2

    Prepare the video URLs. Once you have a list of the video URLs you want to play within your page, include each one inside a list item in the list, extending the existing code as follows: <ul> <li><a href="http://www.youtube.com/embed/VRGf7Cj606A" target="vid_player">Video 1</a></li> <li><a href="http://www.youtube.com/embed/ZaJHHzKfs5A" target="vid_player">Video 2</a></li> <li><a href="http://www.youtube.com/embed/q-orkfBcy7Q" target="vid_player">Video 3</a></li> </ul>

    These links all list YouTube videos. Alter the "href" attributes to suit the addresses of your own chosen videos. Notice that the "target" attribute in each anchor element lists "vid_player" - this will be the name of the iFrame in which the videos will play. Alter the content that appears between the opening and closing anchor tags to suit the links you want your users to be able to click on.

  3. 3

    Include an iFrame element. After the list you prepared, add an iFrame element to your page as follows: <iframe type="text/html" width="640" height="385" name="vid_player"></iframe>

    Notice that the "name" attribute matches the "target" attribute in the list of links. Alter the width and height to suit the size you want you video player to be within the page.

  4. 4

    Embed a video. Extend your iFrame element to embed a video as follows: <iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VRGf7Cj606A" name="vid_player"> </iframe>

    In this case the video is the first in the list, so users will be able to toggle between the three listed, with the first one appearing on first loading the page. If you plan on including YouTube videos, you can add the recommended "class," "allowfullscreen" and "frameborder" attributes: <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/vEowKKVbpmw" allowfullscreen frameborder="0" name="vid_player"> </iframe>

Tips and warnings

  • With the markup recommended by YouTube, your videos will be able to play in either a Flash or HTML5 player, depending on the user environment.
  • If you plan on upgrading your Web pages to use HTML5 in the future, you will not be able to use the iFrame tag, but other media embedding options are available.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.