Html Question posted in
Some basic documentation can be found here.

Html – How to put animated gif images and video behind the multiple vertical lines

I am Derby. I am new in this community. I would need the help to put animated gif images and video behind the multiple vertical lines in the Html code. I would like to insert the style sheet (CSS) in the internal way that is under the same html page. Attached are the source code and page of the display on my multiple vertical lines, animated gif file (test1.gif) and video (test1.mp4). I wish the image and source code would help you figure out the problem and offer the solutions based on your specialty. Thank you.

<!DOCTYPE html>
<html>
<head>
<style>
.verticle-line {
  width: 5px;
  min-height: 1920px;
  background: black;
  margin: 5px;
  float: left
}


</style>
</head>
<body>
<div id="wrapper">
  <div class="verticle-line"></div>

<Script>
for(x=0; x<=70;x++) {
    var vertical = document.createElement('div');
    vertical.className = "verticle-line";
    document.getElementById('wrapper').appendChild(vertical);
}


</Script>

<img src="test1.gif" alt="ballerina" style="width:1080px;height:1920;">
<video id="test" controls width"1080" autoplay>
<source src="test1.mp4" type='video/mp4'>
</video>
</body>
</html>

I expect the animated gif images and video can run behind the multiple vertical lines.enter image description here

Tags:

2

Answers


  1. 0

    If you move your img/video inside of the .vertical-line div, it works by default:

    for(x=0; x<=70;x++) {
    var vertical = document.createElement('div');
    vertical.className = "verticle-line";
    document.getElementById('wrapper').appendChild(vertical);
}
    .verticle-line {
  width: 5px;
  min-height: 1920px;
  background: black;
  margin: 5px;
  float: left
}
    <div id="wrapper">
  <div class="verticle-line">
    <img src="test1.gif" alt="ballerina" style="width:1080px;height:1920;">
    <video id="test" controls width"1080" autoplay>
      <source src="test1.mp4" type='video/mp4'>
    </video>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can refer below code snippet for the solution, few things to keep in mind

    Thank You.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HTML 5 Boilerplate</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .primary-content-wrapper {
      position: relative;
      /* adding width & height because all the child are absolute positioned */
      width: 300px;
      height: 300px;
    }
    
    .primary-content-wrapper>.sample-video {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .primary-content-wrapper>.sample-img {
      position: absolute;
      width: 150px;
      height: 150px;
      /* assuming you only need pointer events on video tag */
      pointer-events: none;
      /* to centeer align gif image */
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    
    .primary-content-wrapper>.vertical-bars-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      /* assuming you only need pointer events on video tag */
      pointer-events: none;
      /* to distribute all the vertical bar equaly */
      display: flex;
      justify-content: space-between;
    }
    
    .primary-content-wrapper>.vertical-bars-wrapper>.verticle-bar {
      width: 5px;
      height: 100%;
      background-color: black;
    }
  </style>
</head>
<body>
  <div class="primary-content-wrapper">
  
    <!-- Video -->
    <video controls width="250" autoplay class="sample-video">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
    </video>
    
    <!-- Gif -->
    <img src="https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_200/r_max/kitten_fighting.gif" alt="gif-img" class="sample-img" />
    
    <!-- Vertial Bars Wrapper -->
    <div class="vertical-bars-wrapper" id="vertical-bars-wrapper">
    </div>
  </div>
  
  <script>
    const maxVerticalBars = 30;

    for (counter = 0; counter <= maxVerticalBars; counter++) {
      const div = document.createElement("div");
      div.className = "verticle-bar";
      document.getElementById("vertical-bars-wrapper").appendChild(div);
    }
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search