Cutup #8 Fluid Video

nana 🧙🏻‍♀️

Published in

Design & Code Repository

3 min readDec 17, 2018

Today, I would like to talk about how to make a fluid video.

A problem occurred when a video gets resized. The height doesn’t get changed automatically while the width of the video element is kept at 100%.

🔮 Here is a magic by Thierry Koblentz and CSS-tricks

HTML

<div class="videoWrapper">
    <iframe ...></iframe>
</div>

CSS

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

🥑 Tip 1. Fluid video with max-width

If you want to give a max-width value, add an outer div called videoWrapper-outer.

HTML

<div class="videoWrapper-outer">
  <div class="videoWrapper">
    <iframe ...></iframe>
  </div>
</div>

CSS

.videoWrapper-outer {
        max-width: 800px;
}.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

✨ Tip 2. JavaScript

To wrap the iframe with the .videoWrapper-outer and .videoWrapper, you can use JS to handle that.

$(function() {
  //*-- Fluid width video --*//
 var $mainContentIframe = $('.main-content iframe');$mainContentIframe.each(function() {
  var $this = $(this);
  
  $this
   .wrap('<div class="videoWrapper-outer"</div>')
   .wrap('<div class="videoWrapper"></div>');
 });
});

🕰 Tip 3. Custom video at a specific time

Vimeo : #t=__m__s

https://vimeo.com/81400335#t=1m2s

Learn more here.

Youtube: ?start=__&end=__;

Replace with the number of seconds for start and stop time.

https://youtube.com/81400335?start=62;orhttps://youtube.com/81400335?end=268;orhttps://youtube.com/81400335?start=62&end=268;

Or just use the start option at Youtube like the image below.

📖 Articles

Fluid Width Video

IN A WORLD of responsive and fluid layouts on the web ONE MEDIA TYPE stands in the way of perfect harmony: video. There…

css-tricks.com

chriscoyier/Fluid-Width-Video

That maintains aspect ratio and works with all major video hosts - chriscoyier/Fluid-Width-Video

github.com

🕹 CodePen

🎈 That’s all for now

💌 Any questions or feedback

I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.

☕️

Lastly, I would love to share <FrontEnd30 /> where I learned many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.