视频周围的 iFrame - 视频嵌入错误自己托管

问题描述

也许在 WP / html 方面有更多经验的人可以帮助我：

我想在我上传到我们的 Wordpress 托管网站的视频周围放置一个绝对定位的框架 (http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png)（随机示例 --> 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%;
        }

有谁知道什么可能是错的？是视频路径错误，还是 .mp4 格式无效？

非常感谢您的帮助！

解决方法

iframe 是一个 HTML 元素，允许将外部网页嵌入到 HTML 文档中。 Learn more about it here. 你不能只给它一个视频文件。

您应该使用 video html5 tag 而不是 iframe 标签并执行类似的操作：

<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 容器。你可以learn more about it here