Embedding Multimedia

💡 The Concept

To embed YouTube video in HTML, you use an iframe element that loads the YouTube player directly inside your page. The <iframe> (inline frame) element lets you embed content from another source directly into your page. YouTube videos, Google Maps, and many other third-party tools all use iframes. You do not host the content yourself. You just paste a code snippet that points to it.

The trick to embeds is first to find the Share button, and from there the Embed button. This lesson shows more detail on how to do it on YouTube and Google Maps, but there are many more websites you can embed from, including Vimeo and Soundcloud.

Embedding a YouTube Video

YouTube generates the iframe code for you. Here is how to get it:

1. Go to any YouTube video and click the Share button below the player.
2. Choose Embed from the sharing options.
3. Copy the <iframe> code that YouTube generates and paste it into your HTML.

Simply copy the embed code and place it where you want it on your web page. The example below is broken into several lines to make it easier to read. In real code, developers usually do not break it out like this, but the line breaks do not change how it works:

<iframe width="560" height="315"
   src="https://www.youtube.com/embed/VIDEO_ID"
   title="YouTube video player"
   frameborder="0"
   allowfullscreen>
</iframe>

Making Videos Responsive

The embed code YouTube gives you uses fixed pixel dimensions, which means the video will not resize on smaller screens. The fix is to wrap the iframe in a container div and use a CSS padding trick to maintain the 16:9 aspect ratio at any width:

<div class="video-container">
   <iframe src="https://www.youtube.com/embed/VIDEO_ID"
      title="Video description"
      frameborder="0"
      allowfullscreen>
   </iframe>
</div>

.video-container {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 ratio: 9 ÷ 16 = 0.5625 */
   height: 0;
   overflow: hidden;
}

.video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Credit for this responsive video technique goes to Flavio Copes.

YouTube URL Parameters

You can customize how an embedded YouTube video behaves by adding parameters to the src URL. Here is an example that autoplays silently, shows captions, and loops:

• autoplay=1: starts playing immediately
• mute=1: required by most browsers for autoplay to work
• cc_load_policy=1: turns on captions
• loop=1: replays the video (requires playlist=VIDEO_ID to work)

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&cc_load_policy=1&loop=1&playlist=VIDEO_ID"
   title="Video description"
   frameborder="0"
   allowfullscreen>
</iframe>

Tip: To loop a single video, set playlist to the same video ID as the one you are embedding, just like in the example above. On its own, loop=1 does not loop a single video. YouTube needs you to list that same video as a one item playlist, and then it replays from the start when it reaches the end.

Embedding Google Maps

Google Maps works the same way. Go to Google Maps, search for a location, click Share, then choose Embed a map. Copy the iframe code Google provides.

Maps can be any aspect ratio, so it is easiest to set the width to 100% and use a fixed height:

<iframe
   src="https://www.google.com/maps/embed?pb=..."
   width="100%"
   height="300"
   style="border:0;"
   allowfullscreen
   loading="lazy"
   title="Map of location">
</iframe>

🎬 The Video

This video demonstrates how to embed and manage the size of a Google Map and a YouTube video.

Exercise: Try It Yourself

Step 1. Open JSFiddle.

Step 2. Go to YouTube, find any video, and copy its embed code. Paste it into JSFiddle. It works! But the video is fixed in size.

Step 3. Wrap the iframe in a .video-container div and add the responsive CSS. Resize the JSFiddle preview to confirm it scales. Now the video will fit in at any width.

Step 4. Go to Google Maps, find a location, and copy the embed code. Add it to your JSFiddle below the video with width="100%" and a fixed height.

❓ Frequently Asked Questions

★ Key Takeaways

Video and audio can make a web page much more engaging. This lesson covered how to embed YouTube videos and other media using the iframe tag. Next, you will get your first introduction to JavaScript, the programming language that adds interactivity to websites. It is the third of the three core web languages, alongside HTML and CSS.

← Back to Special Topics Lessons

← Back to All Lessons