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.
HTML
<div class="video-wrapper"> <iframe src="https://player.vimeo.com/video/92873409" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>
CSS
.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
Bootstrap
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
jQuery to the rescue
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>');
One Response to “Responsive Video Embeds”
CSS Shapes & Graphics - Status201 Development
[…] Using the same technique, combined with a parent container with hidden overflow, we can make responsive triangles. The container has no height and a padding in percentage, just like the responsive embed technique. […]