Youtube-Videos mobil anzeigen

Youtube-Videos mobil anzeigen

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 einzubetten, zeige ich dir einen Profitipp, den du auch als Laie umsetzen kannst.  

Ein bisschen HTML hier… 

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>  

…ein wenig CSS da und voilá!  

Jetzt müssen wir nur noch einen kleinen CSS-Schnipsel einbauen, der wie folgt aussieht: 

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 eingebettet durch einen Iframe responsive darzustellen.  

Letztes Feintuning: Die richtige Größe einstellen 

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  

Du siehst, mit diesem kleinen Kniff aus der Entwicklerwelt sieht deine Seite mit eingebetteten Videos gleich ganz anders aus, nämlich aufgeräumter und professioneller.