Как динамически авторизовать iframe iframe?

Question

Я пытаюсь Autosize My YouTube IFRAME с window.onresize = function(event)

, но он работает только во время загрузки веб-страницы ...

Вот мой код:

<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); 
}