YouTube Video iFrame responsive in die Webseite einbauen

Als Erstes musst du ein bisschen CSS mit verschiedenen Klassen in dein Theme integrieren, damit das funktioniert.

CSS für volle Breite des YouTube Videos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Der Wert unter padding-bottom: 56.25% steht übrigens für die Aspect Ratio von 16:9
-> 9/16*100 =56,25%

HTML Code für volle Breite in ein DIV packen

1
2
3
4

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

Ergebnis

iFrame mit definierter Maximalbreite

Wenn du das Video nicht in voller Breite eingefügt haben möchtest, dann braucht es eine zusätzliche Klasse mit CSS Code .video-container-wrapper:

1
2
3
4
5
6
7

.video-container-wrapper {
max-width: 100%;
width: 600px;
left: 0;
right:0;
margin:auto;
}

HTML Code für die Einbindung mit maximaler Breite

1
2
3
4
5
6

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

Ergebnis mit maximal definierter Breite

Wie du siehst, hat sich das Video nun einfach in die Mitte gepackt. Das sieht je nach Blog oder Webseite ziemlich komisch aus.
Nun kannst Du den o.g. Code einfach mit „float: left;“ ergänzen:

CSS Code um das Video nicht mittig anzuzeigen

1
2
3
4
5
6
7
8

.video-container-wrapper {
float: left;
max-width: 100%;
width: 600px;
left: 0;
right:0;
margin:auto;
}

Nun wird Dein iFrame bzw. dein Video ganz links angezeigt.
Ich habe es für diesen Blog nicht mit diesem CSS Code ergänzt, da ich meine Videos immer mit voller Breite anzeigen lasse.

Übrigens ist der Unterschied auf dem Smartphone mit der maximalen Breite nicht ersichtlich. Je nach Breite des Tablets jedoch schon. Das kommt allerdings auf die Breite an, die Du im CSS Code mit width: 600px; definiert hast.