html - 移动设备上的 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 使 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>