How to make responsive video container div? - html

Question

I'm trying to make video container div responsive but couldn't manage it so far.
My current CSS for video and container:
.header-container{
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
.video{
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin:0 auto;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%;
height: auto;">
<source src = "webd.mp4" type = "video/mp4" >
</video>
</div>
</div>
Current look:
Current look
Could you please tell me how can I fix it? I'm still new in HTML and CSS and I really need your help & advice.

Answer 1

https://jsfiddle.net/mlegg10/fsftz8rt
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe>
</div>

Answer 2

a large deal of your code does not associate itself between html and css so it would be helpful to you to understand how it works. Firstly, video is not styled due to it being referenced as .video in your css and your video container has the opposite with the reference being video-container with no dot so your css should look like this
.header-container {
width: 100% !important;
height: auto !important;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.78;
widows: 100%;
width: 100% !important;
height: auto !important;
margin: 0 auto;
}
To make a view response you need to scale with its parent and to have most things with % to do this you need to add
position: relative;
to all the parents
After this you need to remove the position absolute as it will mess up your styling by making it an object that does not scale properly
Here is an example of what I think you mean:
https://jsfiddle.net/afut7y99/
Change the sliders at the sides to see how it resizes.