Wie erstellt man ein Video Grid?

Ich habe eine Seite, die versucht, 4 Videos in einem 2x2 Raster anzuzeigen, aber ich habe derzeit zwei Probleme.Wie erstellt man ein Video Grid?

Es gibt Raum zwischen Videos
Sie sind alle in einer Spalte

Hier ist meine aktuellen Code ist:

<!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. Ich möchte nicht, dass die Videos eine feste Größe haben, ich möchte zwei Videos in jeder Reihe, deshalb lege ich 50% in die Breite.

Quelle

2016-08-08 chromaticiT

Sie müssen nur float: left; in video Tag hinzufügen.

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>

Quelle

2016-08-08 04:04:00

Antwort

Verwandte Themen