1

我有一个使用 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>
4

1 回答 1

0

看起来您走在正确的轨道上，尽管您可能想尝试一种纯 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 是全宽的，即使它的内容不是。

于 2013-01-05T19:07:56.297 回答