iFrame周围的视频-视频嵌入错误(自己的主机)

Question

也许有更有经验的人可以在这里帮助我:

我想放置一个绝对定位框架(http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png)周围的视频我已经上传到我们的Wordpress托管网站(随机示例->http://fursttedesco.com/wp-content/uploads/2021/02/video.mp4)。我在网上找到了一个可以工作的代码，但只能使用原始示例视频，而不是当我尝试使用上述视频交换URL时。

HTML

<div id="laptop-panel">
<iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

CSS

#laptop-panel {
position: relative;
padding-bottom: 64.5%;
}

#laptop-panel iframe {
box-sizing: border-box;
background: url(http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png) center center no-repeat;
background-size: contain;
padding: 14.7% 12.9% 15%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

有谁知道哪里出了问题吗?这是视频的路径是错误的，或者也许它不与。mp4s工作?

非常感谢您的帮助!

Answer 1

iframe是一个HTML元素，它允许在HTML文档中嵌入外部网页。点击这里了解更多。你不能只给它一个视频文件。

代替iframe标签，你应该使用video html5标签，并做这样的事情:

<div id="laptop-panel">
<video autoplay>
<source src="http://fursttedesco.com/wp-content/uploads/2021/02/video.mp4" type="video/mp4">
</video>
</div>
<style>
#laptop-panel {
position: relative;
padding-bottom: 64.5%;
}
#laptop-panel video {
box-sizing: border-box;
background: url(http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png) center center no-repeat;
background-size: contain;
object-fit: cover;
padding: 14.7% 12.9% 15%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

注意新的object-fit: cover;css规则:它在这里使您的视频覆盖整个video容器。你可以在这里了解更多信息