So you’re videos are popping out of the container on your beautiful responsive site and disappearing off the edge of the screen in mobile? Does it look something like this?

It’s like the video has no respect for my carefully calculated padding.

Now, if this were just HTML5 video all we’d have to do is give our video a 100% width and an auto height, like so:

video {
width: 100% !important;
height: auto !important;
}

But it isn’t HTML5. If we try that on an iframe we get this smashed version.

The browser tries to render the iframe at a default height of 150px. That’s not going to work. We don’t want a squashed video.

Basically, what you’re doing is creating a 16:9 wrap to contain your video iframe. To do this you’ll need to create a container with a padding-bottom of 56.25% (16:9 ratio or 9/16). Here’s the code to use.

What that does is makes the wrapping box around our video have a bottom padding of 56.25% of our video width, which will be set to 100%. Then what we’re going to do next is give the embedded video within it an absolute position with a width of 100% and a height of 100%.