Wilco Van Meppelen Scheppink Wilco Van Meppelen Scheppink - 5 months ago 22
jQuery Question

Video background banner (not full page)

I'm building a website with a video banner from youtube but I don't know how to achieve this.

For now I have this:

#video-background {
position: absolute;
right: 0;
top:135px;
left:0;
bottom: 0;
width:100% !important;
width: auto;
height:50vh;
min-height: 550px;
z-index: 99;
}

<div id="video-background">
<iframe frameborder="0" height="100%" width="100%"
src="https://www.youtube.com/embed/.....">
</iframe>
</div>


But now I have very large black borders aside of the video on bigger screens and it is not responsive at all.

Answer

You need to reserve space with the containing element and then absolutely the child (iframe).

Try this CSS:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* This reserves a 16:9 space */
    padding-top: 25px;
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

and this HTML:

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

Code taken from: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Comments