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

Question

我在我的页面 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;}

Answer 1

将其放入您的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>

来源

Answer 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>