Youtube oder Vimeo Video responsive einbinden

Nur mit CSS ohne JavaSript (Cascading Style Sheets)

Beitrag am erstellt von

Heutzutage ist das Thema Responsive-Webdesign sehr wichtig geworden. Jeder surft mit dem Handy oder Tablet im Internet und schaut sich Webseiten oder Videos an. Doch das Problem ist, dass die Youtube und Vimeo Videos standartmäßig nicht responsive sind. Natürlich könnte man den Iframes eine max-width: 100%; geben, doch das Problem hierbei ist, das sich ein hässlicher schwarzer Rand bildet, da das Verhältnis von 16:9 nicht bewahrt wird. Um dieses Problem zu Lösen, gibt es ein sehr schönee CSS Lösung die von CSS: Elastic Videos.

CSS

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

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

        

HTML

      
    
<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/yLoX1JSJ5EU" frameborder="0" allowfullscreen></iframe>
</div>
        

Result

Result Webseite