'Duplicated video elements aren't working in HTML?

I've added four HTML video elements to this REPL project and sometimes the first and third video load and other time it's only the first video element that loads the video. Why aren't all the videos running? All the code is the same: REPL code link

I've also added the HTML and CSS code below; however, I'm not able to upload an mp4 file in Stack Overflow. So, if you run the snippet, it won't display the video. You have to click the REPL link to reproduce the issue.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
/*   background-color: black;
 */  color: white;
  padding: 30px;
  border: 1px solid green;
  hegith: 100%;
}

.outterscreen {
  background-color: black;
  border: 1px solid red;
  padding: 5px;
  height: 80%;
/*           overflow-y:auto;
 */
}

.msg {
/*   background-color: #191919;
 */  padding: 10px;
  left-padding: 15px;
  right-padding: 15px;
  margin-top: 20px;
  border-radius: 5px;

  border: 2px solid blue;
  background: #191919;

}

.text {
  border: 1px solid grey;
  color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>The Intro</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="outterscreen">
      
      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>
      
    </div>
    <script src="script.js"></script>
  </body>
</html>

Here's the REPL link -> REPL code link

htmlcsshtml5-video


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions