Part of the HTML Multimedia Reading List

YouTube provides code to embed video from its service into a web page. Hosting videos on YouTube is often a good idea: the service supports high-quality H.264 video, potentially exposes your video to a wide audience, and offloads hosting demands. However, these advantages come at a cost: once you upload the video, you essentially cede control of it. YouTube may add advertising to your content, censor it, or block it from showing in certain countries. An alternative is to host the video yourself, which provides complete control of your content.

The Embed Process

To embed a YouTube video on your web page, find the Share button for that particular video on YouTube, usually located under the video‘s bottom right corner.

After clicking the Share button, a window will appear with an Embed button in its bottom right corner. Clicking on that will show the suggested embed code.

As of this writing, the code YouTube provides looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/atccV1nWb6U" 
    frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
</iframe>

That’s quite a bit of code. Breaking it down:

  • an iframe element provides a view through a window into another site: in this case, adding this code to a page will provide a window to the video associated with the src attribute.
  • the width and height attributes are the fixed dimensions of the video; in most cases, these should be removed to make the content responsive. More information on that below.
  • frameborder is an outdated attribute; it should be removed and substituted with CSS (see below).
  • gesture="media" is YouTube’s current non-standard way of trying to push autoplay with audio through an iframe. Part of the Gesture Delegation API proposal, gesture will likely be replaced with delegateStickyUserActivation in the future. As auto-playing video with sound on a web page is a bad idea, this should be removed.
  • allow="encrypted-media" is YouTube’s initial support of the Encrypted Media Extension, a controversial specification for DRM on the web. Since your video content is very unlikely to require this feature, the attribute can be removed.
  • allowfullscreen provides exactly that option for the video; you should keep this attribute if the video has at least 720p resolution, and you don’t mind the YouTube content replacing your own while in fullscreen mode.

Trimmed of the fat, our code is now:

<iframe allowfullscreen 
    src="https://www.youtube.com/embed/atccV1nWb6U">
</iframe>

Other options in the Embed window change the src URL to add more features.

YouTube Embed Options

They are mostly self-explanatory:

  • Start at: sets a start time for the video (default is 0:00)
  • Show suggested videos: prompts the viewer to explore more YouTube content when the video finishes.
  • Show player controls: presents a control bar during touch / mouseover showing pause/play, volume and fullscreen controls, together with options to change the quality and closed captioning of the video. Generally speaking, this should be left on.
  • Show video title overlays the video with it‘s YouTube title, together with Share and Watch Later options (assuming that the user is logged into Google).
  • Enable privacy-enhanced mode: by default, YouTube will “look through” the iframe to gather information about your web page visitors for their own purposes, regardless of wether the video is playing or not. Turning this option on will stop this behaviour unless the user opts to play the video.

Making It Fluid

Removing the width and height attributes of the iframe will collapse the video down to it’s smallest possible size. We will recover from that loss, and make the video responsive, by surrounding it with a div element that uses a class:

<div class="respContainer">
    <iframe src="https://www.youtube.com/embed/atccV1nWb6U" 
        allowfullscreen>
    </iframe>
</div>

This is associated with some CSS:

.respContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.respContainer iframe {
    position: absolute;
    top: 0; 
    left: 0;
    border: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

This technique “props open” the iframe with a div that is the correct aspect ratio to display the video. The video is now fully responsive, and will be 100% the width of its container.

Note that the aspect ratio created by this technique assumes that the content is filmed in standard 16:9. Video in other dimensions, such as ultra-wide, will require different values to create a container of the correct shape.

Considerations & Conclusions

It should be mentioned that there are many other video hosting companies that provide similar services, including Vimeo and Twitch. They all use iframe elements in a similar way, so the techniques shown here should also work for embedding their videos on your site.

It might be tempting to ask - especially with a video that is only or primarily audio - if the YouTube embed code can be controlled to show no video, and “display” only audio. The short answer is no, since that would void the YouTube Terms of Service.

Further control of embedded YouTube videos, above and beyond those featured in this article, will require use of the YouTube Data API.

Embedding videos from a service is never completely free of consequences: YouTube, in addition to the actions discussed above, will insert 500kb of JavaScript into your page to help control the video. But embedding video is very convenient, and provides access to a wealth of content, so using the service is usually worthwhile… so long as you follow the best practices discussed here.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.