비디오 그리드를 만드는 방법은 무엇입니까?

2x2 격자에 4 개의 비디오를 표시하려고하는 페이지가 있지만 현재 두 가지 문제점이 있습니다.비디오 그리드를 만드는 방법은 무엇입니까?

그들은 하나의 열에 모두
비디오 사이의 공간은

내 현재 코드가있다 :

<!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

비디오 그리드를 만드는 방법은 무엇입니까?

답변

관련 문제