Wilco Van Meppelen Scheppink Wilco Van Meppelen Scheppink - 4 months ago 17x
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;
bottom: 0;
width:100% !important;
width: auto;
min-height: 550px;
z-index: 99;

<div id="video-background">
<iframe frameborder="0" height="100%" width="100%"

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


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/.....">

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