Question

我想创建一个响应式视频横幅，并且能够插入视频，但是在玩了一些CSS之后，无法删除html上方和下方的大填充。我是编码的初学者，并且仅使用教程来解决此问题。

这是针对我的Shopify网站。视频本身已上传到Shopify（不是youtube视频）。我能够启动并运行视频，但是视频顶部和底部都有大量填充。但是，在大型计算机上，此空间已最小化。如何使它具有响应性，并使视频与菜单相对应，在其上方或下方没有填充（同时使用不同的计算机尺寸调整大小）。

这是我网站上的填充+视频的样子：

这是我当前使用的代码。预先感谢！

video {
  position: static;
  width: 100%;
  height: auto;
  padding-top: 0%;
  padding-left: 0%;
}

<video autoplay="" muted="" loop="" id="myVideo">
  <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
</video>

Answer 1

我将使用您给我们的东西，因此希望能对您有所帮助。要在上方或下方没有填充，请使用以下方法：

video {
   padding-top: 0;
   padding-bottom: 0;
}

作为测试，我做了一小页演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0;
        }
        video {
            position: static;
            width: 100%;
            height: auto;
            padding-top: 0;
            padding-bottom: 0;
        }
    </style>
</head>
<body>
    <div style="width: 100%; height: 50px; background-color: black"></div>
    <video autoplay="" muted="" loop="" id="myVideo">
        <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
    </video>
</body>
</html>

这将产生正确的结果，使其恰好对准上面的对象（在这种情况下只是一个普通的div）。我还在不同设备上使用Google Chrome浏览器的开发工具对其进行了测试，并且预期结果仍然存在。如果这不起作用，则您的应用程序中可能存在其他原因

Answer 2

要解决的技巧是添加一个包装器，并为其添加一定百分比的顶部或底部填充。 Here's the original article on the technique.

.vidWrap {
    position: relative;
    padding-top: 56.25%; /* 16x9 aspect ratio */
    max-width: 100%;
    height: 0;
}
.vidWrap.xwide {
    padding-top: 26%;
}
.vidWrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

<div class="vidWrap xwide">
    <video autoplay="" muted="" loop="" id="myVideo">
        <source src="https://cdn.shopify.com/s/files/1/0002/5441/0764/files/White_Back_2.mp4?1958" type="video/mp4">
    </video>
</div> <!-- /.vidWrap.xwide -->

如何制作没有顶部或底部填充的自适应视频横幅

2 个答案: