移动设备上的 Youtube iframe，宽度不好答案

【问题标题】：Youtube iframe on mobile, bad width移动设备上的 Youtube iframe，宽度不好
【发布时间】：2018-01-06 21:30:22
【问题描述】：

我在我的页面 zaybee.pl 上遇到了 youtube iframe 的问题，当您使用 youtube 查看帖子中的小窗口时，一切正常 - youtube 宽度更改为窗口宽度：

但在手机（Android、Google Chrome）上，iframe 比网页的其余部分要大：

页面上的其余元素具有良好的宽度。在桌面测试人员上，页面在移动设备上的外观看起来一切都很好。不知道哪里有问题。

我的代码片段：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

<div class="ytframe"><iframe width="100%" height="364" style="position:relative;z-index:100;" src="http://www.youtube.com/embed/'.$src['v'].'?wmode=transparent" frameborder="0" allowfullscreen></iframe></div>

.ytframe {width:calc(100% - 77px);height:400px;position:relative;}

【问题讨论】：

标签： html css iframe youtube

【解决方案1】：

我刚刚检查了你的页面 - 看起来你的 facebook iframe 有 width="600px" 这使得页面更宽，并且它在右侧添加了空白空间 - 并且让 youtube iframe 拉伸到那个宽度 <iframe name="f388722c584edd4" width="600px" height="150px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/plugins/page.php?adapt_container_width=true&amp;app_id=&amp;channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df1b19a710c55a68%26domain%3Dzaybee.pl%26origin%3Dhttp%253A%252F%252Fzaybee.pl%252Ff2c00c183120b2%26relation%3Dparent.parent&amp;container_width=1920&amp;height=150&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FZaybeeInspiracje&amp;locale=pl_PL&amp;sdk=joey&amp;show_facepile=false&amp;small_header=false&amp;width=600" style="border: none; visibility: visible; width: 500px; height: 130px;" class=""></iframe>

同时更改内联样式 width="600px" 和 style="width:500px;"到宽度 100% 应该可以修复它

编辑：

您还应该尝试更新该 facebook iframe 的包装 div，因为我可以看到 <div class="fb-page fb_iframe_widget"> 也有宽度

【讨论】：

我删除了 facebook 插件的代码来测试，youtube 还是一样大的宽度。
更新了我的答案。你基本上在那个 facebook iframe 周围还有另一个元素，它也有固定的宽度。
现在请看我的页面 - 我删除了这个 fb 小部件的每个元素，但还是一样。

【解决方案2】：

您可以使用此 CSS 使 YouTube iframe 在移动设备和 ipad 上响应

.iframeVideo {
	height: 0px;
	padding-top: 25px;
	padding-bottom: 56.2%;
	position: relative;
}
.iframeVideo iframe {
	width: 100%;
	height: 100%;
	position: absolute;
}

<div class="iframeVideo">
<iframe src="https://www.youtube.com/embed/Jiji_1iosv4" frameborder="0" allowfullscreen></iframe>
</div>

【讨论】：

我应用了你的代码，在桌面上运行良好：i.imgur.com/Nk7fPBS.jpg 但在移动设备上：i.imgur.com/EK3jRWZ.png 所以我不明白，一切都应该向左浮动，这个 iframe 的每个容器有 100% 的宽度，但仍然比应有的宽度更宽
对不起，这是我手机浏览器的问题，在隐身模式下它可以工作，所以问题解决了！
为了防止低分辨率视频在有很多可用宽度时被拉伸，您可以将 max-width 和 max-height CSS 属性添加到 .iframeVideo iframe

【解决方案3】：

把它放在你的 CSS 样式表中（就像魔术一样完美地工作）。

iframe[src*=youtube] {
                    display: block;
                    margin: 0 auto;
                    max-width: 100%;
                    padding-bottom: 10px;
                }

你的 iframe 可以有一个宽度（设置为首选）和高度（设置为首选）

<iframe  src="YoutubeEmbeddedUrl"  width="560" height="315" frameborder="0" allow="autoplay; encrypted-media allowfullscreen"
      allowfullscreen></iframe>

Source

【讨论】：