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>

February 12, 2014

Resize an iFrame to match its contents

Filed under: JavaScript — Tags: , , , — Hanan Schwartzberg @ 9:52 am

The Issue

You need to load content into an iFrame, but you don’t know the height of the content ahead of time.

The Solution

Catch the lonload event of the iFrame and resize it to the height of the body of the content

&lt;iframe id="ifArtworkDetails" width="650px" height="420px" scrolling="no" 
        src="someDynamicContent.html" marginheight="0" marginwidth="0" 
        frameborder="0" onload="resizeIframe(this)">&lt;/iframe>
    function resizeIframe(objIframe) {
        objIframe.style.height = 
            objIframe.contentWindow.document.body.scrollHeight + 50 + 'px';
    }
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.