嵌入式 youtube 播放器在移动设备上显示黑屏

【问题标题】：Embeded youtube player show black screen on mobile嵌入式 youtube 播放器在移动设备上显示黑屏
【发布时间】：2019-03-19 03:57:58
【问题描述】：

我有一个 wordpress 网站，我向他添加了一个用于嵌入首页的视频的 html 代码。这是代码：

<iframe width="560" height="315" src="https://www.youtube.com/embed/XXX" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

我可以在桌面上清楚地看到视频，但在移动设备（Chrome 和其他浏览器）上我只能看到无法点击的黑屏。

有什么想法吗？

【问题讨论】：

标签： video youtube embed

【解决方案1】：

试试下面的代码。这使您的 iframe 响应迅速。

.iframe-container{
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; 
	margin-bottom:15px
}

.fw-iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

<div class="iframe-container">
	<iframe class="fw-iframe" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/DSR4gRfWmW0">
    </iframe>
</div>

相应地调整内边距、边距和宽度。

【讨论】：