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
2
Answers
If you move your img/video inside of the
.vertical-line
div, it works by default:You can refer below code snippet for the solution, few things to keep in mind
Thank You.