1

自動再生などを利用できるようにするために、Youtube API を使用して埋め込まれた youtube ビデオがあります。ウィンドウのサイズを変更すると、iframe 内の YouTube ビデオを移動またはサイズ変更できません (移動がより重要です)。呼び出し:

window.onresize

左または右を変更すると、中央に移動しても機能しません。

これが私の html です。おそらくひどいものですが、私が言ったように、私は Web デザイナーではありません。

<!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 アプローチを試してみることをお勧めします。動画をページの中央に配置することが目標の場合は、固定幅の div 内に YouTube 動画を配置し、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 に答える