如何制作视频网格？

Question

我有一个页面试图在 2x2 网格中显示 4 个视频，但我目前有两个问题。

视频之间有space
它们都在一栏中

这是我当前的代码：

<!DOCTPYE html>
<html>
    <head>
        <title>Memorabilia</title>
        <style>
            body {
                margin: 0px;
            }
            video {
                width: 50%;
            }
        </style>
    </head>
    <body>
        <video autoplay loop muted>
            <source src="a.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="b.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="c.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="d.mp4" type="video/mp4">
        </video>
    </body>
</html>

P.S。我不希望视频是固定大小的，我希望每行有两个视频，所以我将宽度设为 50%。

Answer 1

您只需在 video 标签中添加 float: left;。

body {
  margin: 0px;
}
video {
  width: 50%;
  float: left;
}

        <video autoplay loop muted>
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <video autoplay loop muted>
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>

如何制作视频网格？

How to make a video grid?

html

css

grid-layout