home sitemap mailform print Impressum

YouTube Video einbinden

Anleitung ein YouTube Video responsive in Ihre eigene Webseite einzubinden.
 
Responsive bedeutet, dass mit Hilfe von CSS3 Media-Queries eine Webseite das Layout und Design selbstständig an die Grösse des Displays anpasst.
Der Einbettcode ist ohne HTML5 und CSS Fehler.
Das Video wird auf der kompletten Inhaltsseite Ihrer Webseite angezeigt.
Width und height Angaben im HTML5 Code sind nicht nötig, die Grösse wird im youtube-container-100 mit CSS Code definiert.
Am Ende des Videos werden keine weiterführenden Videos angezeigt.
Vollbild Funktion ist möglich, wird aber eventuell durch den Editor automatisch deaktiviert. 
Lösung für CMSimple_XH und eventuell auch für andere Editoren im Cmsimpleforum.

Besuchen Sie www.youtube.com und wählen Ihr Video aus.
 
youtu_video.jpg

Sie müssen dem Einbettungscode noch Ihr Video zuordnen. Auf YouTube unterhalb des Videos Teilen anklicken und nochmals auf Einbetten klicken und Code kopieren. Nur den Teil nach embed/ bis " Markieren und kopieren.
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/nnEuvgtkeCA" frameborder="0" allowfullscreen></iframe>
 
Kopierter Code nun in den Einbettungscode kopieren zwischen embed/ und vor ?rel=0" 
 

<p></p>
<div class="youtube-container-100"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>

Jetzt nur noch den bearbeiteten Einbettungscode kopierten und in Ihre Seite einfügen. Im Editor auf <> Quelltext oder HTML klicken und den kopierten Code einfügen und speichern. Achten Sie darauf das https und der ganze Code übereinstimmen. Das YouTube Video können Sie jetzt abspielen und ansehen jedoch ist das Video noch nicht Responsive.
 
Den unten stehenden CSS youtube-container-100% Code müssen Sie in Ihrer CSS-Datei einfügen. Jetzt ist Ihr YouTube Video responsive und wird auf Smartphone, Tablet oder einem PC mit unterschiedlichen Display Grössen automatisch angepasst.
 
 /* YouTube Video 100% responsive on page Start */
.youtube-container-100 {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0;
height: 0;
overflow: hidden;
box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81);
}
.youtube-container-100 iframe,
.youtube-container-100 embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* YouTube Video 100% responsive on page End */
 

Je nach Seitenverhältnis Ihres Videos können Sie den Code padding-bottom: 55%; anpassen z.B. padding-bottom: 56,25%; oder auch eine höhere Zahl. Schwarze Ränder können so eventuell vermeiden werden. Wenn Sie zum Beispiel die Beschriftung in Ihrem Video praktisch an den Rand Ihres Videos geschrieben haben ist padding-bottom: 55%; okay.

Vilen Dank für Dein Demo Video Martin.
Mehr Videos von Martin Urs Klöti auf YouTube oder besuchen Sie seine Webseite silvergym.ch.

 

 

Alternative
Das Video wird automatisch abgespielt. 
 
Kopierter Code nun in den Einbettungscode kopieren zwischen embed/ und vor ?autoplay=
 
<p></p>
<div class="youtube-container-100"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?autoplay=1&rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
 

 

News

  

Templats Download für
CMSimple_XH  
 
links_icon.png
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch

 

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg