Youtube embed dynamic sizing

Question

I've created this script and it works pretty well except onload. On resize it works great and even on load it works great 90% of the time. I'm guessing that its due to the script running before the iframe is loaded but don't know what to do about it.

$( document ).ready(function() {
    var content = $('#hero'); // top section container
    var iframe = $('.videoWrapper iframe'); // iframe
    var contentH = $(window).height() - 158; // set container height 100% of window minus some space for the header and sticky navbar
    var contentW = $(window).width(); // set container width 100% of window
    var iframeH = contentH - 150; // set iframe height to container height minus some space for margins and hgroup
    content.css = ('height',contentH);  // set container height
    iframe.css = ('height',iframeH); // set iframe height
    var iframeW = iframeH/9 * 16; // calculate iframe aspect ratio
    iframe.css('width',iframeW); // set iframe width
} );
$('iframe').load(function() {
    var content = $('#hero');
    var iframe = $('.videoWrapper iframe');
    var contentH = $(window).height() - 158;
    var contentW = $(window).width();
    var iframeH = contentH - 150;
    content.css = ('height',contentH);
    var iframeW = iframeH/9 * 16;
    iframe.css = ('width',iframeW);
} );

$(window).resize(function() {
    var content = $('#hero');
    var iframe = $('.videoWrapper iframe');
    var contentH = $(window).height() - 158;
    var iframeH = contentH - 150;
    content.css = ('height',contentH);
    iframe.css = ('height',iframeH);
    var iframeW = iframeH/9 * 16;
    iframe.css('width',iframeW);
    var margin = ($(window).width() - iframeW) / 2;
    $('.videoWrapper').style.marginLeft = margin;
} );

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <hgroup class="span12 text-center">
                <h1></h1>
                <h2></h2>
            </hgroup>
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
                <div class="videoWrapper">
                    <div id="player"></div>
                </div>
            </center>

            <script>
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    videoId:'xxxxxxxxxxx',playerVars: { 
                        disablekb:1,enablejsapi:1,iv_load_policy:3
                    }
                } );
            }
            </script>
        </div>
    </div>
</div>

Answer 1

Here is the final result I ended up with..

See full gist here and live example here.

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

---

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
            <div class="videoWrapper">
                 <div id="player"></div>
            </div>
            </center>
            <script>
            function onYouTubeIframeAPIReady() { 
                player = new YT.Player('player', {
                   videoId:'xxxxxxxxxxx',playerVars: {  controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
                } );
                resizeHeroVideo();
             }
             </script>
        </div>
    </div>
</div>

---

var player = null;
$( document ).ready(function() {
    resizeHeroVideo();
} );

$(window).resize(function() {
    resizeHeroVideo();
});

function resizeHeroVideo() {
    var content = $('#hero');
    var contentH = viewportSize.getHeight();
    contentH -= 158;
    content.css('height',contentH);

    if(player != null) {
        var iframe = $('.videoWrapper iframe');
        var iframeH = contentH - 150;
        if (isMobile) {
            iframeH = 163; 
        }
        iframe.css('height',iframeH);
        var iframeW = iframeH/9 * 16;
        iframe.css('width',iframeW);
    }
}

resizeHeroVideo is called only after the Youtube player has fully loaded (on page load does not work), and whenever the browser window is resized. When it runs, it calculates the height and width of the iframe and assigns the appropriate values maintaining the correct aspect ratio. This works whether the window is resized horizontally or vertically.