Responsive Embed Youtube Video as banner

2
votes

I'm placing an embed youtube video on my website. It's responsive and resizing correctly however I don't want the video to have a height of 100%. I want it to have a max height of 450px and then resize down.

//html

<div id="video-wrapper">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/DcqJvYF1ewA" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

//css

#video-wrapper {
  width: 100%;
  max-height: 450px;
}
.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}

When i give video-wrapper a width of lets say 80% or 400px it works but I can't do the same with the height. When I change the embed class to 450px it crops the video.

Here's the JSFiddle i created: http://jsfiddle.net/c34phqgo/1/

1
htmlcss

1 Answers

0
votes

I hope I'm understanding you right, but I think this is what you mean. Set the max-height of the iframe to 450px. Scales with the screen. 

#video-wrapper {
  width: 100%;
  height 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 450px;
}