CODEWITHSUNDEEP
htmlcssgrid-layout
user5684207
user5684207

Reputation:

How to make a video grid?

I have a page that tries to display 4 videos in a 2x2 grid, but I currently have two problems.

  1. There is space between videos
  2. They are all in one column

Here is my current code:

<!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. I don't want the videos to be of a fixed size, I want two videos in each row, that's why I put 50% in the width.

Upvotes: 0

Views: 7642

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

You need to just add float: left; in video tag.

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>

Upvotes: 2

Related Questions