Control height of wrapper div which have responsive iframe

1
votes

I have a div in which there is a youtube/iframe video and I have made the video responsive but I want to control the max height of wrapper which is not working

Here is the code I have

Problem currently if I put the wrapper in full width height div, its covering screen, but I want to apply a max width and height on it

.video_case {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
  max-height: 300px;
}
.video_case iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
<div class="video_case">
  <iframe src="https://www.youtube.com/embed/Rsa7a_a2H8I?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
1
jqueryhtmlcssiframe
What's the problem? - mirmdasif
trying to control the height of container, right now its covering screen - Sanjeev Kumar
then why are you using height:100% ?? - Leo the lion
height:100% is for iframe, but I want to control the div not the iframe - Sanjeev Kumar
@SanjeevK you want like this jsfiddle.net/eq38cnmg - Leo the lion

1 Answers

0
votes

After reviewing lots of related post I found that I should apply max-height on iframe and that fixed my problem, so I just defined the max-height value in it.

.video_case iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
   max-height:400px;
}