Question

所以我试图在彼此旁边显示两个视频，上面有一个标题。我使用了column属性并且它在视觉上工作得很好，但是，每当我在第二列中的任何视频上播放它时，它会神奇地跳到下一行的第一列并失去所有暂停/播放功能......这是一个问题只发生在chrome，IE和Firefox似乎发挥得很好..

此外，如果有人有任何其他方式显示它会很棒。我尝试在它自己的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);
        }

Answer 1

我已经回答了类似的问题，例如 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

如何阻止在Chrome列中跳转iframe视频

1 个答案: