我有一个使用 Youtube API 嵌入的 YouTube 视频，以便能够利用自动播放等功能。我真的不是网页设计师，而且我遇到了一些问题。当我调整窗口大小时，我无法移动 iframe 中的 YouTube 视频或调整其大小（移动更重要）。打电话：
window.onresize
然后改变左边或右边，居中它不起作用。
这是我的 html，它可能很糟糕，但正如我所说，我不是网页设计师。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="b">
<div id="logo"></div>
<div id="main2"></div>
<div id="yt"></div>
</body>
<script>
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
// Delete the DIV
document.body.removeChild(scrollDiv);
var youtube=document.getElementById("yt");
youtube.style.width=screen.width-(screen.width/2)+"px";
youtube.style.height=(screen.width-(screen.width/2))/(16/9)+"px";
///YOUTUBE
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt', {
height: '600',
width: '1000',
left: '300',
videoId: 'J---aiyznGQ',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function redirectTo()
{
//replace between "" with anything. Keep the 'http://' if the webpage is a website outside your directory.
window.location.replace("http://www.google.com");}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
/*var duration=player.getDuration()*1000;
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, duration);
done = true;
}*/
if (evt.data == YT.PlayerState.ENDED){
$('#ytvid').fadeTo(/*time - millisecond*/2000, /*opacity*/0);
setTimeout(redirectTo, /*time - millisecond*/2000);
}
}
/*function stopVideo() {
$('#ytvid').fadeTo(2000, 0);
player.stopVideo();
}*/
//OTHER
var i=document.getElementById("main2");
var j=document.getElementById("logo");
var y=document.getElementById("yt");
i.style.width=screen.width+"px";
document.getElementById("b").style.width=screen.width-scrollbarWidth+"px";
j.style.left=(window.innerWidth/2)-(screen.width/16)+"px";
j.style.backgroundSize=screen.width/16+"px";
window.onresize =hs;
function hs()
{
var l=100;
/*i.style.width=window.innerWidth+"px";
i.style.minWidth=screen.width+"px";*/
j.style.left=(window.innerWidth/2)-l+"px";
//y.style.width="100px";
j.style.backgroundSize=screen.width/16+"px";
}
</script>
</html>
看起来您走在正确的轨道上，尽管您可能想尝试纯 CSS 方法以使其更容易。如果目标是使视频保持在页面中央，请将 YouTube 视频放在固定宽度的 div 内，并将 margin-left 和 margin-right 设置为 auto。然后，当浏览器调整大小时，浏览器将自动保持 div（以及包含的视频）居中。
编辑：
这是使用 CSS 的 margin:auto 使内容居中的示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.centered {
display: block;
margin: auto;
}
</style>
</head>
<body>
<iframe width="640" height="480" class="centered" src="http://www.youtube.com/embed/J---aiyznGQ?rel=0" frameborder="0" allowfullscreen></iframe>
</body>
</html>
请注意，您必须为其指定宽度（在本例中为 640）才能正常工作。否则，即使 div 的内容不是全宽，默认情况下也是全宽。