ビデオグリッドの作成方法は？

2x2グリッドに4つのビデオを表示しようとしているページがありますが、現在2つの問題があります。ビデオグリッドの作成方法は？

彼らはここですべて1列に

ある動画

の間のスペースは、私の現在のコードがありますされています

<!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％を置く理由は、各行に2つのビデオが欲しいです。

出典

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

ビデオグリッドの作成方法は？

答えて

関連する問題