Question

我已经创建了这个脚本，除了onload之外它运行得很好。在调整大小时，它工作得很好，甚至在加载时它可以在90％的时间内工作。我猜测它是由于脚本在加载iframe之前运行，但不知道如何处理它。

$( 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

你可能是对的。它很可能无法正常工作，因为浏览器尚未加载iframe。

如果有来自YouTube iframe API的onload事件，您可以尝试使用该功能调用您的功能。

或者（更快但更黑客）只需稍后输入一个javascript超时：

setTimeout(
  function() 
  {
    /*your resize code*/
  }, 5000);

数字是以毫秒为单位的延迟。

Answer 2

以下是我最终的结果......

See full gist here和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);
    }
}

只有在Youtube播放器完全加载后（页面加载不起作用），并且每当调整浏览器窗口大小时，才会调用resizeHeroVideo。运行时，它会计算iframe的高度和宽度，并指定保持正确宽高比的适当值。无论窗口是水平调整还是垂直调整，都可以正常工作。

Youtube嵌入了动态尺寸

2 个答案: