How to embed YouTube videos responsively with just HTML/CSS
The official method provided by YouTube for embedding a video is with iFrames, which are typically unresponsive. Even when you try to a embed a video with the WordPress Gutenberg block editor, you'll noticed that the videos look terrible on mobile devices. Thankfully, there are simple solutions to this problem.
An easy way to embed YouTube videos responsively is to use the concept of intrinsic ratios. This involves wrapping the YouTube iframe within a container div, and making the div responsive by applying a padding-bottom of 56.25% to it. This forces the video to have an aspect ratio of 16:9 and scale well on all devices (including mobile devices).
This is what the code looks like:
HTML:
<div class='embed-container'><iframe src='https://player.vimeo.com/video/126904326' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
CSS:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
How and Why the code works:
Originally based on the intrinsic ratios principle explained by Thierry Koblentz, this is what the code does:
First, position: relative will make all child elements within the container div position themselves in relation to the container, and a padding-bottom: 56.25% gives the container an aspect ratio of 16:9.
Then position: absolute applied to the iFrame makes it free from the height of the container div whch has been set to 0. Top: 0 sets the iframe position near the top of the container div while left:0 sets it near the left of the container div.
Lastly, setting the width and height of the iframe both to 100% forces it to stretch to fill the height and width of its container. The end result is a video that with an aspect ratio of 16:9 and adjusts with changing screen sizes.
Our Embed Responsively tool creates responsive embeds based on the above principle. You can enter the YouTube URL of your video, copy the responsive embed code generated by our tool, and add it to your website's HTML directly. You can also use the responsive code generated in WordPress by adding it as an HTML block in the Gutenberg editor.
The intrinsic ratios principle can also be used to generate responsive Google maps and Vimeo video embeds.
How to embed YouTube Videos responsively in a Bootstrap website
Bootstrap comes with predefined CSS styles that make videos and iframes responsive. Just add a class of "embed-responsive-item" to the iFrame, then wrap the iFrame within a div with 2 classes: "embed-responsive" and "embed-responsive-16by9".
This is what your code should look like:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
Lastly, you can set the aspect ratio of your video to ratios other than 16:9 and they'll still be responsive. Take a look:
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>