Fluid YouTube embeds

This post assumes you know some HTML/CSS.

If you want to embed a YouTube video, you might notice it doesn't automatically resize. Adding width="100%" to it doesn't work either, you'll get the wrong aspect ratio for your video.

Here's one way to fix that.

First you want to wrap your YouTube embed code in a container like a div. I added the class name "embed" so I can later refer to it in CSS.

Now the CSS.

That will always make the container the correct ratio (16:9), and the video inside it will fill up that space. If the video is a different ratio, you'll have to use a different padding-bottom % value. For 4:3 videos you should use 75%. You can calculate this yourself by doing height ÷ width, then multiplying that by 100.

Source: https://css-tricks.com/fluid-width-video/