Video – Rawi Rai

http://www.creativebloq.com/html5/create-fluid-width-videos-8112993

<iframe> video (YouTube, Vimeo, etc)

Our little 100% width trick isn’t going to help us when dealing with video that is delivered via iframe. Setting a height is required, otherwise browsers will render the iframe at a static height of 150px, which is far too squat for most video and makes for more R&E (Ridiculous and Embarrassing). Literally all browsers will render iframe, canvas, embed, and object tags as 300px x 150px if not otherwise declared. Even if this isn’t present in the UA stylesheet.

The iframe above is missing its height attribute. While it's 100% width, its height is a static (and impractical) 150px — The iframe above is missing its height attribute. While it’s 100% width, its height is a static (and impractical) 150px

Fortunately there are a couple of possible solutions here. One of them was pioneered by Thierry Koblentz and presented on A List Apart in 2009: Creating Intrinsic Ratios for Video. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.

.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%;
}