javascript - 如何动态自动调整youtube iframe？

Question

我正在尝试使用 window.onresize = function(event)

自动调整我的 youtube iframe

但是，它只在网页加载期间工作...

这是我的代码:

<iframe id="player" width="560" height="315" src="//www.youtube.com/embed/xWPDujqIwZc" frameborder="0" enablejsapi="1"></iframe>
<script type="text/javascript" src="youtube.js"></script>

和:

youtube.js

var Lscreen=window.innerWidth;
var largeur=Lscreen-17;

$("#player").attr("width", largeur);
$("#player").attr("height", largeur*.78);

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) 
{
    event.target.playVideo();
    player.mute();
}

function onPlayerStateChange(event) {
if (event.data == 0) 
    {
        event.target.playVideo();
    }
}


window.onresize = function(event) 
{
    Lscreen=window.innerWidth;
    //alert(Lscreen);
    $("#player").attr("width", largeur);
    $("#player").attr("height", largeur*.78);
}

Answer 1

您只在页面加载时计算一次窗口宽度，并且始终使用相同的宽度来调整大小。只需像这样在 onresize 函数中更新该变量:

window.onresize = function(event) 
{
    Lscreen=window.innerWidth;
    largeur=Lscreen-17; // add this line
    //alert(Lscreen);
    $("#player").attr("width", largeur);
    $("#player").attr("height", largeur*.78);
}