视频周围的 iFrame - 视频嵌入错误（自己托管）答案

【问题标题】：iFrame around video - video embed error (own hosting)视频周围的 iFrame - 视频嵌入错误（自己托管）
【发布时间】：2021-05-27 07:26:22
【问题描述】：

也许在 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%;
        }

有人知道哪里出了问题吗？是视频的路径错误还是.mp4s 不兼容？

非常感谢您的帮助！

【问题讨论】：

“我在网上找到了一个有效的代码，但仅适用于原始示例视频” – https://www.youtube.com/embed/BhEWkcyXYwg?…不是指的是视频，它指的是包含视频的完整 HTML 文档。完全不同的一双鞋。

标签： html css wordpress iframe video-embedding

【解决方案1】：

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

【讨论】：