How to stack <div>s ?

[vmars316]

Hello;
How to stack <div>s ?
I am not having much luck .
Can't stack and can't read a file .
https://vmars.us/ShowMe/mp4-Slide-Show.html
Though clearly the file is there:
https://vmars.us/ShowMe/Big_Buck_Bunny-Video-1MB.mp4

Pls , What am I doing wrong re-coding ?
Pls, so how do I stack divs ?

Thanks for your Help...

 

[Johna]

What do you mean by "stack" divs?
Also how can we know what you're doing wrong if we can't see your code.

 

[vmars316]

Please see it in action here:
https://vmars.us/ShowMe/mp4-Slide-Show.html
My code:

<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="UTF-8">
<style>
#bunnyVideo { display:block;

}

#catechismVideo { display:block;

}
</style>
</head>

<body>
<button onclick="Big_Buck_Bunny_Video()" type="button">Page 1</button>
<button onclick="Catechism()" type="button">Page 2</button><br>

<div id="videoContainer" style="position:absolute; top:50px; width:600px; height: 500px; border-style:solid; border-width: 2px;">

<div style="position: absolute; top:1px">
<video id="catechismVideo" width="500" height="500px;">
  <source src="Wesminster-Larger-Catechism-Q-20-30-31.mp4" type="video/mp4">
  <source src="Wesminster-Larger-Catechism-Q-20-30-31.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
</div>

<div style="position: absolute; top:1px">
<video id="bunnyVideo"  width="500" height="500;" >
  <source src="Big_Buck_Bunny_Video-1MB.mp4" type="video/mp4">
  <source src="Big_Buck_Bunny_Video-1MB.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
</div>
 </div>
 
<script>
var vid1 = document.getElementById("bunnyVideo");
var vid2 = document.getElementById("catechismVideo");

function Big_Buck_Bunny_Video() {
document.getElementById("catechismVideo").style.display = "none";
document.getElementById("bunnyVideo").style.display = "block";
  vid2.pause();
  vid1.play();
}

function Catechism() {
document.getElementById("bunnyVideo").style.display = "none";
document.getElementById("catechismVideo").style.display = "block";
  vid1.pause();
  vid2.play();
}
</script>

</body>
</html>

 

[Johna]

I still don't get what you mean by stacking divs? Have you already achieved what you wanted in that link?

 

[Deleted member 2829]

No idea on the "stacking divs" issue, whatever that is...
But it's real strange that the bunny video isn't showing. Inspection in the Network tab of the debugger shows the technical reason for it:



The name and path are correct, and the file is actually being opened (contrary to what you wrote) but somehow it's being sent back as a text file rather than a video. I suggest having a look at your Apache logs. Maybe try with another video to see if the problem is specific to this one.
I've seen that the direct video URL you posted does indeed work. However when I copy and past the URL as shown in this image, and paste it in my browser, it gives the 404 as well. And I can't see any difference between the two URL's. Hmmmm.....

 

[vmars316]

I found this on stacking divs :
https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html
https://www.w3docs.com/tools/code-editor/9154

 

[Deleted member 2829]

I found this on stacking divs :
https://www.w3docs.com/snippets/css/how-to-position-one-image-on-top-of-another-in-html-css.html
https://www.w3docs.com/tools/code-editor/9154

Yes nice, but where do you get that term stacking divs from ? Neither page even mentions the word stack or stacking. Terminology is important.