Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

December 15, 2015

Responsively embed a YouTube video

Filed under: CSS — Tags: , , , , , — Hanan Schwartzberg @ 9:35 am

The Issue

The default YouTube embedding code sets the video to a fixed size.

The Solution

Add these classes to your css:

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

Now wrap your embedding code in a div with the class defined above.

<div class="divVideoContainer">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/MtN1YnoL46Q?controls=0"
        frameborder="0" allowfullscreen></iframe>
</div>
Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.