Flexible Videos im Responsive Design
Zunächst einmal alle Videos im HTML-Quellcode mit einem div-Container umschließen. Einbindung über HTML beim Artikel.
<div class="video-container">
<iframe src="http://www.youtube.com/embed/YOUTUBE-ID-EINSETZEN" frameborder="0" width="560" height="315"></iframe>
</div>Mit folgendem CSS -Code das Video in der Breite immer dem umschließenden Container anpassen. Also üblicherweise dem Content.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-top: 30px;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}