Question

我有一个wordpress网站，我向他添加了一个HTML代码，以便将视频嵌入到首页中。这是代码：

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

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

有什么想法吗？

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

相应地调整填充，边距和宽度。

嵌入式youtube播放器在手机上显示黑屏

1 个答案: