Content Creation

Iframe responsive einbinden: So passen sich deine Youtube-Videos an

Du hast ein Video von Youtube oder Vimeo über die Einbetten-Funktion auf deiner Webseite oder deinem Blog eingebaut, aber irgendwie sieht das Ganze auf deinem Smartphone nicht so schön aus?

Um einen Iframe responsive einzubinden, zeige ich dir einen Profitipp, den du auch als Laie umsetzen kannst.

Brauchst du Unterstützung beim Webdesign und Web Development deiner Website, bringen unsere Experten dich gerne vorwärts.

Erst ein bisschen HTML

Das Problem kann mit einem HTML-Container und ein wenig CSS gelöst werden.
Zuerst nehmen wir uns den HTML-Teil vor:

Bevor du den Einbetten-Link von Youtube oder Vimeo kopierst, erstellst du einen Container an der Stelle wo du das Video angezeigt haben möchtest:

<div class=”video-container”> 

</div>

In diesen Container kann dann der Iframe eingefügt werden.
Um das Video DSGVO-konform einzubinden, denke daran, den erweiterten Datenschutzmodus zu aktivieren.

Das Ganze sollte dann wie folgt aussehen:

<div class=”video-container”> 
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/D...?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
</div>

Nun noch ein wenig CSS

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

Dieser kleine Schnipsel reicht, um ein Video responsive darzustellen. Schon hast du dein Vimeo- oder Youtube-Iframe in HTML responsive eingebettet.

Letztes Feintuning: Die Größe festlegen

Wenn das Video nicht auf der ganzen Breite angezeigt werden soll, sondern auf eine maximale Breite beschränkt sein soll, kannst du ganz einfach dem Video-Container eine weitere Zeile CSS hinzufügen:

max-width: 600px;


In diesem Beispiel wird der ganze Container auf 600px Breite beschränkt.

Da ein Iframe eine feste Höhe hat, umschließen wir ihn mit einem Container und fügen dem Container mit padding-bottom die prozentuale Höhe des Seitenverhältnisses des Iframes hinzu. Hierbei entsprechen 56,25% dem Verhältnis 16:9 (9/16 x 100 = 56,25%).

Ergebnis: Optimale Darstellung durch responsive Iframe-Einbindung

Du siehst, mit diesem kleinen Kniff aus der Entwicklerwelt sieht deine Seite mit eingebetteten Vimeo- oder Youtube-Iframe gleich ganz anders aus, nämlich aufgeräumter und professioneller. Ein Video mithilfe eines Iframes responsive einzubinden wird so ganz einfach.

Du bist selbst Webentwickler oder möchtest wissen, was ein Webentwickler überhaupt tut und was nicht? Dann wird dich unser Blogbeitrag zum Thema „Webentwickler sind keine PC-Profis“ interessieren.

Haben dir die Tipps von unserem Experten weitergeholfen? Dann teile diesen Beitrag und lasse andere an deinem Wissen teilhaben!

Teile diesen Beitrag
Folge uns in den sozialen Netzwerken
Teilen