The Ultimate YouTube Video Embed Setup

ūüĎč Ciprian on Saturday, May 15, 2021 in Blog
Last modified on Saturday, May 15, 2021

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

I’m sure you’ve seen this hundreds of times and there’s countless methods of embedding a YouTube video with the least intrusive footprint possible. I’ve also written about using the YouTube API to embed a video Iframe. This time I needed a regular embed to integrate as seamlessly as possible into one of my sites.

Let’s take this beautiful drone video of Norway, and add the embed code:

<div class="youtube-iframe">
    <iframe src="https://www.youtube-nocookie.com/embed/mg67iIFivDo?playlist=mg67iIFivDo&listType=playlist&autoplay=1&controls=0&loop=1&mute=1&cc_load_policy=0&iv_load_policy=3&disablekb=1&fs=0&modestbranding=1&playsinline=1&rel=0&hd=1&vq=hd1080" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="1920" height="1080" loading="lazy"></iframe>
</div>

And here are the styles for a perfect, full-width video embed:

.youtube-iframe {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.youtube-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    animation: fadeIn 2.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

And this is the result, a loopable, no-controls, perfect-aspect-ratio video:

Let’s break it down:

What are we doing with the container – .youtube-iframe – CSS?

  • position: relative: Lets us use absolute positioning for the Iframe.
  • width: 100%: Makes the width 100% of its parent container.
  • padding-bottom: 56.25%: The 16:9 aspect ratio corresponds to a height which is 56.25% of the width.

Note: To find the aspect ratio of a container, use this formula: height ÷ width = aspect ratio.

What are we doing with the actual Iframe CSS?

  • position: absolute: Frees the video from the height boundary of its parent and allow it to be positioned over the padding area.
  • top: 0: Positions the video at the top of its parent container.
  • left: 0: Positions the video at the left of its parent container.
  • width: 100%: Stretches the video to fill the width of its parent container.
  • height: 100%: Stretches the video to fill the height of its parent container.
  • border: 0: Removes the border.
  • pointer-events: none: Removes the video info on hover.
  • animation: fadeIn 2.5s: Fades in the video on page load.

What are we doing with the Iframe’s parameters?

  • playlist=mg67iIFivDo: This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the¬†VIDEO_ID¬†specified in the URL path, and the videos specified in the¬†playlist¬†parameter will play thereafter. We don’t need other videos appearing on video end or on accidental hover or focus.
  • listType=playlist: The¬†listType¬†parameter, in conjunction with the¬†list¬†parameter, identifies the content that will load in the player. Valid parameter values are¬†playlist¬†and¬†user_uploads. Same as above, we don’t want other videos to appear.
  • autoplay=1: This parameter specifies whether the initial video will automatically start to play when the player loads.
  • controls=0: This parameter indicates whether the video player controls are displayed.
  • loop=1: In the case of a single video player, a setting of¬†1¬†causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video. This parameter has limited support in IFrame embeds. To loop a single video, set the¬†loop¬†parameter value to¬†1¬†and set the¬†playlist¬†parameter value to the same video ID already specified in the Player API URL.
  • mute=1: Unused. I have included it for reference only.
  • cc_load_policy=0: This parameter causes closed captions to be hidden.
  • iv_load_policy=3: Setting the parameter’s value to¬†3¬†causes video annotations to not be shown by default.
  • disablekb=1: Setting the parameter’s value to¬†1¬†causes the player to not respond to keyboard controls.
  • fs=0: Setting this parameter to¬†0¬†prevents the fullscreen button from displaying in the player.
  • modestbranding=1: This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to¬†1¬†to prevent the YouTube logo from displaying in the control bar. Does not seem to work anymore.
  • playsinline=1: This parameter controls whether videos play inline or fullscreen on iOS. Results in inline playback for mobile browsers and for¬†WebViews¬†created with the¬†allowsInlineMediaPlayback¬†property set to¬†YES.
  • rel=0: If the parameter’s value is set to¬†0, related videos will come from the same channel as the video that was just played. We mitigate this by using the loop and the playlist parameters.
  • hd=1: Unused. I have included it for reference only.
  • vq=hd1080: Unused. I have included it for reference only.

ūüĎč Added by Ciprian on Saturday, May 15, 2021 in Blog. Last modified on Saturday, May 15, 2021.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy