How to Responsively Embed HTML Videos Including Youtube Videos; A Strict Manual

You clearly want more than just sloppily including a YouTube video on your page. You want responsively embed YouTube videos into HTML code so they appear great on your phone, friend’s big display, and anything in between. If you are bored searching little scroll bars or chopped frames, you are in the right place. Responsive video embeds keep everything appearing fantastic on any device you use.

First of all, the boring method. Straightly copy and paste the YouTube iframe into your HTML file. Yes, it only works till you widen the browser window. It looks suddenly as out of place as a penguin in the desert. The default embed codes are fixed width and height; this merely does not applicable for fluid layouts.

Enter the magic of CSS then. Plant this simple recipe right in your HTML garden. Turn on some CSS and surround your iframe in a div with a class; let’s call this “video-container.” Usually, you set your div’s position relative, the iframe to absolute, then play about with percentages:

.video-container {position: relative; padding-bottom: 56.25%; /*16:9 ratio */height: 0; overflow: hidden; max-width: 100%;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}

Than is it. Driving the padding-bottom hack is the “aspect ratio box”. The ratio (56.25%)? The mathematical magic maintaining a 16:9 video looking perfect is what drives this. If you follow a 4:3 ratio, replace 75% for that amount. Black boxes and horizontal scrollbars have disappeared from phones.

For those using Bootstrap or another framework, look for “embed responsive” classes. But if you want your code to be as lean as a marathon runner, the pure CSS method works. You are there; no more Frankenstein designs. More “secret ingredient” than “Rocket Science” is responsive HTML embedding of YouTube videos. Test, change, and let any gadget show off your movies.