YouTube Video iFrame responsive in die Webseite einbauen

YouTube responsive in die Webseite einbauen
Elementor der beste Websitebuilder Werbung

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.

Als digitaler Brandlöscher löse ich jeden Tag solche oder andere Probleme. Ich nenne sie Brände. Solche lösche ich gerne für dich! Hast du auch einen Brand zu löschen? Drück jetzt den Brandruf-Button und nimm Kontakt mit mir auf!

Schliess dich der Brandlöscher-Community auf Facebook an und stellst dort deine Frage, die ich oder ein Mitglied der Gruppe dir gerne beantworten.

Elementor der beste Websitebuilder Werbung

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Über mich

Seit 2016 schreibe ich regelmässig über verschiedene Themen aus dem Bereich Social Media, Online Marketing und Webdesign. Meistens sind es auch Anleitungen zu Problemen die ich gelöst habe, aber noch keine schriftliche Lösung gefunden habe.

Elementor der beste Website Builder Werbung
hostpoint Werbung