The Ultimate YouTube Video Embed Setup

Ciprian on Saturday, May 15, 2021 in Blog
Last modified on Tuesday, August 22, 2023

I’m sure you’ve seen these hundreds of times, and there are 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.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 full-screen 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 any more.
playsinline=1: This parameter controls whether videos play inline or full-screen 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.