Below is the method that I use to create responsive or fluid YouTube videos. This is based on an article by Thierry Koblentz with some modifications. This method also works for other video sources, but this article and the changes I made are specifically for YouTube videos. (Featured video below: "Middle" by DJ Snake ft. Bipolar Sunshine.)
To use this method insert the following pieces of CSS code in your stylesheet. Here I use "video-frame" as the class name but you can use "videoWrapper", "video-container", "myVideo" or any other name as long as it is unique in your stylesheet.
.video-frame {
position: relative;
padding-bottom: 58%;
height: 0;
overflow: hidden;
}
.video-frame * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Your HTML will then look like this:
<div class="video-frame">[YoutTube embed code]</div>
The original article uses a "padding-bottom" value of 56.25%, which is based on the 16:9 aspect ratio. But through trial and error I've found that a value of 58% produces a better and more consistent look at different screen sizes. I also added "border: 0" to remove annoying borders that appear on the top and left sides of the video. I have verified that this method works on the current versions of Firefox, Chrome, Internet Explorer, and Edge.
