Question

我有一个使用Youtube API嵌入的YouTube视频，可以利用自动播放等功能。我真的不是webdesigner，我遇到了一些问题。当我调整窗口大小时，我无法在iframe中移动或调整大小（移动更重要）youtube视频。主叫：

window.onresize

然后更改左侧或右侧，中心它不起作用。

这是我的HTML，它可能很糟糕，但正如我所说，我不是webdesigner。

<!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>

Answer 1

看起来你正走在正确的轨道上，尽管你可能想尝试一种纯粹的CSS方法来让它变得更容易。如果目标是将视频保持在页面中心，请将YouTube视频放在固定宽度的div中，并将margin-left和margin-right设置为auto。然后，当浏览器调整大小时，浏览器将自动保持div（因此包含视频）居中。

修改

以下是使用CSS边距的示例：自动到中心内容：

<!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是全宽度，即使其内容不是。

移动包含youtube视频onresize的iframe

1 个答案: