Trouble placing video behind a div element - html

Question

I'm trying to place a small video behind a banner-like div element. After some time researching I managed to at least show the contents of the div, but the video is nowhere to be seen. If I place them separately both show up, but if I try to stack them on top of each other it disappears.
HTML:
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src=/assets/img/cs.mp4" type="video/mp4">
</video>
</div>
<div id="cs-table">
//content
</div>
</div>
CSS:
#castle-siege {
width: 1000px;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
}
#cs-table {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}

Answer 1

I think in this instance, that you need to set position attribute as well as z index in order to display the video properly. Also ensure your video is present and correct at the set url of course! Set the position of the video to absolute and set the table relative to it, either with a higher or lower z-index, as necessary (higher if you want it to be seen on top of the video)
For purposes of demo, I set the width to 80%, it's prob better to use percentages/ an adjustable unit, rather than setting the width in px.
Hope this helps
#castle-siege {
width: 80%;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index:0;
}
#cs-table {
width: 100%;
height: 100%;
margin-top: 30px;
margin-left: 50px;
color:red;
text-align:left;
position: relative;
z-index:1;
}
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
</video>
</div>
<div id="cs-table">
Hi there, how's it going? There's supposed to be a table here.
</div>
</div>