如何动态自动调整youtube iframe?
How to dynamically autosize a youtube iframe?
我正在尝试使用 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);
}
您只在页面加载时计算一次 window 宽度,并且始终使用相同的宽度来调整大小。只需像这样在 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);
}
我正在尝试使用 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);
}
您只在页面加载时计算一次 window 宽度,并且始终使用相同的宽度来调整大小。只需像这样在 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);
}