Video Hintergrund Banner (nicht volle Seite)

Question

Ich bin den Aufbau einer Website mit einem Video-Banner von youtube, aber ich weiß nicht, wie dies zu erreichen.

Für jetzt habe ich dies:

#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> 

Aber jetzt habe ich sehr große schwarze Ränder beiseite des Videos auf größeren Bildschirmen und es ist überhaupt nicht anspricht.

Answer 1

Sie brauchen Raum mit dem Aufnahmeelement reservieren und dann unbedingt das Kind (iframe).

Versuchen Sie, diese 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%; 
} 

und HTML:

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

-Code entnommen aus: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 2

Voll Fenster mit Teig Grenze.

<div class="video-size "> 
    <iframe src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe> 
</div> 

.video-size { 
    position: relative; 
    padding-bottom: 50%; 
    padding-top: 14%; 
    height: 0; 
} 
.video-size iframe { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

YOU get live code and Preview here

.video-size { 
 
    position: relative; 
 
    padding-bottom: 50%; 
 
    padding-top: 14%; 
 
    height: 0; 
 
} 
 
.video-size iframe { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
\t top: 0; 
 
    left: 0; 
 
}

<div class="video-size "> 
 
    <iframe src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe> 
 
</div>