Responsive Video Embeds

Embedding video’s (YouTube, Vimeo a.o.) in your average CMS will give you a fixed size video in an iframe. Sometimes breaking your layout on smaller screens.
By wrapping it into an element with no height but a relative padding we can keep the aspect ratio we want while scaling with different resolutions.

<div class="video-wrapper">
	<iframe src="https://player.vimeo.com/video/92873409" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

.video-wrapper {
    position: relative;
    padding-bottom: 56.20%; /* adjust to meet the desired aspect ratio */
    height: 0;
    margin-bottom: 10px;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

See the Pen Responsive video embed by Status201 (@status201) on CodePen
18405

If you’re so lucky to be working on a site that uses Bootstrap, all you have to do is add some markup. The iframe needs a special class (embed-responsive-item) as well!

<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="//www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>

See the Pen Responsive Video Embed with Bootstrap by Status201 (@status201) on CodePen.18405

If it’s not possible to change the content template and add the wrapper around video embeds, you could wrap the iframe clientside with a single line of jQuery.

$('iframe[src*="vimeo"], iframe[src*="youtube"]').wrap('
	<div class="video-wrapper"></div>
');

If you’re using bootstrap but can’t control the embed code serverside, jQuery can help as well:

$('div.embed-responsive > iframe').addClass('embed-responsive-item');

And if you can’t even put the wrapper (your head) around it:

$('iframe[src*="vimeo"], iframe[src*="youtube"]')
	.addClass('embed-responsive-item')
	.wrap('<div class="embed-responsive embed-responsive-16by9"></div>');