移動包含youtube視頻的iframe onresize

我有一個使用Youtube API嵌入的YouTube視頻，以便能夠利用自動播放等。我真的不是一個webdesigner，我有一些問題。在調整窗口大小時，我無法移動或調整iframe中的YouTube視頻的大小（移動更重要）。打電話：移動包含youtube視頻的iframe onresize

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>

來源

2013-01-05 Oliver

它看起來像你在正確的軌道上，儘管你可能想嘗試一種純粹的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是全寬，即使其內容不是。

來源

2013-01-05 19:07:56 robrich

Youtube API使用「yt」div作爲它創建的iframe的容器。我曾嘗試將此css應用於「yt」容器：http://pastebin.com/FSwLfJyV 但是這不起作用。 – Oliver

請勿使用position：absolute，因爲它會將其從正常文檔流中移除，並且會取消從邊距自動居中：auto – robrich

仍然不起作用。試圖改變它相對，然後累了完全刪除它。仍然沒有中心。 – Oliver

移動包含youtube視頻的iframe onresize

回答

相關問題