Responsive YouTube Videos - Levisan.me

Excerpt

The name’s Levi Breederland. I design and build things for the internet. This is my blog.

Published: 08 May 2014

Last Updated: 21 August 2018

I’ve noticed that lots of sites that are otherwise responsive don’t have responsive videos. Here’s what you can do to make your site have video embeds that are always the width of the container.

First, add this to your CSS:

.video-container {  position: relative;  padding-bottom: 56.25%;  padding-top: 30px; height: 0; overflow: hidden;} .video-container iframe,.video-container object,.video-container embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}

Then, just wrap the embed code with the video-container div, like so:

<div class="video-container"> <iframe src="/VIDEO URL HERE" frameborder="0" width="560" height="315"></iframe> </div>

If you use WordPress, an easy way to do this is with the DobsonDev Shortcodes plugin, so you don’t have to add anything to your theme.