如何停止在Chrome列中跳轉的iframe視頻

因此，我試圖在上面顯示兩個視頻旁邊的標題。我使用了列屬性，並且它的視覺效果很好，但是，每當我在第二列中的任何視頻中播放時，它都會奇蹟般地跳到下一行中的第一列，並且失去所有暫停/播放功能......這是一個問題只發生在鉻，IE瀏覽器和Firefox似乎玩它很好..如何停止在Chrome列中跳轉的iframe視頻

此外，如果任何人有任何其他方式顯示它會很好。我嘗試在自己的div中製作每個標題和視頻，然後將這些div顯示爲內聯，但出於某種原因，這種方式無效;它仍然向另一個人展示了他們。

這裏是我的代碼：

<div class="topfloor" align="center"> 
    <h3>Living Room and Den</h3> 
     <p> 
      <iframe width="480" height="360"  src="https://www.youtube.com/embed/jLijkSO7aGM?rel=0" frameborder="0" allowfullscreen></iframe> 
     </p> 


    <h3>Upstairs Bedroom</h3> 
     <p> 
      <iframe width="480" height="360" src="https://www.youtube.com/embed/4SG5JVIKWRk?rel=0" frameborder="0" allowfullscreen></iframe> 
     </p> 
</div>

和：

.topfloor{ 
     background-color: rgba(70,130,180, 0.9); 
     padding-top: 10px; 
     -webkit-column-count: 2; 
     -moz-column-count: 2; 
     column-count: 2; 
     } 

.topfloor h3{ 
     margin-top: 0px; 
     color: rgb(0,0,0); 
     background-color: rgba(70,130,180, 0.9); 
     }

來源

2015-04-06 PrettyTone

我已經回答了類似的問題像this before。
這裏的伎倆，它也將讓您的視頻響應爲小屏幕

你的HTML是這樣的：

<div id="leftHalf"> 
    <h3>Living Room and Den</h3> 
     <iframe width="100%" height="100%" src="http://www.youtube.com/embed/IJNR2EpS0jw"></iframe> 
</div> 

<div id="rightHalf"> 
    <h3>Living Room and Den</h3> 
     <iframe width="100%" height="100%" src="http://www.youtube.com/embed/IJNR2EpS0jw"></iframe> 
</div>

和你的CSS：

#leftHalf { 
    width: 50%; 
    position: absolute; 
    left: 0px; 
    overflow: hidden; 
} 
#rightHalf { 
    width: 50%; 
    position: absolute; 
    right: 0px; 
    overflow: hidden; 
}

退房的online example here

來源

2015-04-06 20:20:16

對不起，對於遲到的答覆..這實際上並沒有解決我的問題，因爲我不希望視頻佔據屏幕的一半。我只是想要將常規的480x360視頻與上面的標題並排放置。我使用的是柱狀圖，視覺效果很好。但是，如果我在第二欄中的任何視頻上點擊播放，它會跳到不同的位置......這對其他瀏覽器沒有問題 – PrettyTone

然後，只需使用「480x360」交換iframe的寬度和高度值，或者將2個div封裝在主包裝器中，以便它們能夠響應該主包裝器。這是並排顯示2個視頻的最佳方法，並使它們具有響應性，以便稍後在較小的屏幕中不會遇到問題，但您可以隨時更改和播放值以根據需要進行設置。雖然你需要注意它們的寬度和高度始終保持相同的'480x360'http://jsfiddle.net/qqy1k0cp/1/，當然它們佔據屏幕的一半，因爲它們沒有包裝 –

這裏是另一個例子與主div包裝：http://jsfiddle.net/qqy1k0cp/2/ –

如何停止在Chrome列中跳轉的iframe視頻

回答

相關問題