CODEWITHSUNDEEP
htmlcss
ricster
ricster

Reputation: 521

How to make responsive video container div?

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.

Upvotes: 2

Views: 15362

Answers (2)

mlegg
mlegg

Reputation: 832

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>

Upvotes: 2

Hive7
Hive7

Reputation: 3675

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.

Upvotes: 1

Related Questions