CODEWITHSUNDEEP
javascriptjqueryhtmlcssyoutube
Julián Fernández Osom
Julián Fernández Osom

Reputation: 33

How to make a Youtube embed fit screen height, while letting its width overflow

I'm building a site that includes a youtube embed as the header. This youtube embed is responsive and scales well on any browser size, but there is one problem: even using the padding-bottom: 56.25% trick, the video is taller than the screen size, while the width is perfect. I need some sort of solution to make the video's height match the viewport size, and to crop or hide any "extra" width on the video as a result of this.

HTML:

<header class="postingHeader">
  <div class="video-container">
    <div id="my-video"></div>
    <div id="quoteContainer">
     <h1 id="bioTitle2">"Title"</h1> 
     <p id="bioQuote2">“Quote”</p>
    </div>
  </div>

CSS:

.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;}

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

I tested this in a 16:10 screen and it looks perfect. Thanks in advance.

Upvotes: 1

Views: 2094

Answers (1)

KreaTief
KreaTief

Reputation: 406

Why would you want to do that? Don't you want for people to see the full video?

You could make this work by wrapping your responsive container in a div, which has overflow hidden set on it. Then use some javascript to add the viewport's height as height, so it does cover the full screen.

$(document).ready(function(){
  height = $(window).height();
  $(".viewport_control").css({"height": height});
});

Also you might want to center the video, so add

top: 50%;
left: 50%;
transform: translate(-50%, -50%)

I built you a codepen so you can see it in action

http://codepen.io/bekreatief/pen/Hirbq/

Upvotes: 0

Related Questions