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

使用Google Chrome浏览器（Windows/Mac）时，我发现以下代码在页面加载时显示视频预览，但几乎在1秒后预览消失。我使用Google Chrome浏览器在5台不同的电脑上试用了这款产品但在其他使用Google 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/

（记得用谷歌浏览器）

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

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

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

谢谢。

来源

2017-09-13 Angel

删除您的溢出隐藏的风格，它的工作原理...

更新的小提琴。

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; 
}

来源

2017-09-14 00:01:24 Sameer

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

回答

相关问题