4

我正在构建一个响应式网站，上面嵌入了 youtube 视频。该视频位于响应式 iframe 中，并且在除 Firefox 之外的所有浏览器中都可以正常运行。它根本没有出现。

我尝试了保存模式，将 html5 添加到链接中，将所有 js 和 js 查询注释掉。如果我在 px 中添加宽度和高度，它确实显示并且工作正常，但是它没有响应。

我可以通过将容器的高度更改为百分比或 vw 值来显示它。无论我添加什么图形，它都会将视频渲染为双倍高度并切断左右两侧的大部分。当视口缩小时，它也会切断更多的宽度。将容器值更改为 0 以外的任何值时，所有其他浏览器都会发生同样的情况。

试过 Firebug，但那甚至没有看到 iframe。

这是代码：

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	margin-bottom: 4vw;
} 
	
.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}
<div class="embed-container">
  <iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>

网址： https ://www.marjanderksen.com

4

1 回答 1

0

您是否尝试过使用 FitVids.js？

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
      $(".embed-container").fitVids();
  });
</script>

插件下载链接：https ://github.com/davatron5000/FitVids.js

于 2018-01-11T14:47:44.890 回答