Как сделать сетку видео?

У меня есть страница, которая пытается отобразить 4 видео в сетке 2x2, но в настоящее время у меня две проблемы.Как сделать сетку видео?

Существует пространство между видео
все они находятся в одном столбце

Вот мой текущий код:

<!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% ширины.

источник

2016-08-08 chromaticiT

Вам нужно просто добавить float: left; в video тег.

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>

источник

2016-08-08 04:04:00

ответ

Смежные вопросы