Question

使用谷歌Chrome浏览器（Windows / Mac），我发现以下代码在页面加载时显示视频预览，但在将近1秒后预览消失。我在5台不同的计算机上用Google Chrome浏览器试过了这个。但在使用谷歌Chrome浏览器的其他计算机上，预览并没有消失（只有1/6的尝试它正常工作）。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css" media="all">
.container {
    overflow: hidden;
}
</style>
</head>

<body>
    Video 1:<br />
    <div class="container">
        <div>
            <iframe
                frameborder="0"
                src="https://www.youtube.com/embed/juqyzgnbspY"
                width="385" height="217"
                align="left"
            >
            </iframe>
        </div>
    </div>
    Video 2:<br />
    <div class="container">
        <div>
            <iframe
                frameborder="0"
                src="https://www.youtube.com/embed/juqyzgnbspY"
                width="385" height="217"
                style="float:left"
            >
            </iframe>
        </div>
    </div>
</body>

</html>

这里有jsfiddle：https://jsfiddle.net/rqwb5L67/

（请记住使用 Google Chrome ）

正如您在上面所看到的，代码有两种变体。一个使用属性：align，另一个使用css属性：float（在iframe上）。

有关为什么会发生这种情况的任何想法？

这是更大代码的最小化版本，因此，我需要尝试不同的解决方案来寻找符合我需求的解决方案。

感谢。

Answer 1

删除溢出隐藏的样式，它可以正常工作......

更新了小提琴。

https://jsfiddle.net/rqwb5L67/2/

给你的div高度和宽度，然后是iframe

Video 1:<br />
<div class="container">
    <div class="frame1">
        <iframe
            frameborder="0"
            src="https://www.youtube.com/embed/juqyzgnbspY"
            width="385" height="217"

        >
        </iframe>
    </div>
</div>
Video 2:<br />
<div class="container">
    <div>
        <iframe
            frameborder="0"
            src="https://www.youtube.com/embed/juqyzgnbspY"
            width="385" height="217"
            style="float:left"
        >
        </iframe>
    </div>
</div>


.frame1{
  width:100%;
  height:217px;
  text-align:center;
}

嵌入的视频在页面加载后消失

1 个答案: