0

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

我想在我上传到我们的 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？

非常感谢您的帮助！

4

1 回答 1

0

Aniframe是一个 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容器。你可以在这里了解更多

于 2021-03-02T09:39:10.130 回答