8.2 Embed a Video

We can also use the iframe tool discussed in the previous section to insert videos. YouTube videos are used as examples. Check the link formats with the platform if another platform is chosen.

Create an HTML container (e.g., define a new class named video_container) to wrap the iframe and configue an HTML iframe.

<style type="text/css">
.video_container {
  position: relative;
  padding-bottom: 56.25%; 
}

iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    /* Full width of the video container */
  height: 100%;   /* Full height of the video container */
}
</style>

Find the video ID of the YouTube video, which is the part after v= in the URL of the vedio. For example, if the URL is https://www.youtube.com/watch?v=2kbM96Jr4nk, the ID is 2kbM96Jr4nk.
Load the video in the iframe. Paste the ID of the video right after https://www.youtube.com/embed/ in the src part.⁷ The Option frameborder="0" hides the border of the video frame.

<div class="video_container">
<iframe frameborder="0" 
  src="https://www.youtube.com/embed/2kbM96Jr4nk">
</iframe></div>

Here is one of my favorite of all times.

(Optional) Set the video_container padding-bottom attribute to be the reciprocal of the aspect ratio of the video.⁸ For example,

Aspect Ratio of Video	Padding-Bottom
1:1	100%
16:9	56.25%
4:3	75%