YouTube Video einbinden

Anleitung ein YouTube Video responsive in Ihre eigene Webseite einzubinden.
Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
Namensnennung im Code bitte beibehalten.
/* YouTube Video 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch */
<!-- YouTube Video-container small Start / by Richard Kircher (c)2018/ www.richukunst.ch --> 
 
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.
Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken.
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.

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.
 
<iframe width="560" height="315" src="https://www.youtube.com/embed/nnEuvgtkeCA" frameborder="0" allowfullscreen></iframe>
Nur den Teil nach embed/ und vor " frameborder Markieren und kopieren. (rot markiert)
 
Kopierter Code nun in den Einbettungscode kopieren zwischen embed/ und vor ?rel=0" (rot markiert) 
 

<!-- YouTube Video 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p></p>
<div class="youtube-container-100"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
<!-- YouTube Video 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch -->

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 / by Richard Kircher (c)2018/ www.richukunst.ch */
.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 / by Richard Kircher (c)2018/ www.richukunst.ch */

 

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=
 
<!-- YouTube Video 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p></p>
<div class="youtube-container-100"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?autoplay=1&amp;rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
<!-- YouTube Video 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch -->

Das Video wird nicht auf der kompletten Inhaltsseite Ihrer Webseite angezeigt.
 
Code einfügen wie oben erklärt. Das Video wird in der Mitte Ihrer Webseite angezeigt. 
 
<!-- YouTube Video-container small Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p></p>
<div class="video-container-wrapper-small">
<div class="video-container-small"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?rel=0" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
</div>
<p></p>
<!-- YouTube Video-container small / by Richard Kircher (c)2018/ www.richukunst.ch -->

 
/* YouTube Video-container small Start / by Richard Kircher (c)2018/ www.richukunst.ch */
div.video-container-wrapper-small {
max-width: 100%;
width: 600px;
left: 0;
right:0;
margin:auto;
}
div.video-container-small {
position: relative;
padding-bottom: 56.25%;
padding-top: 15px;
height: 0;
overflow: hidden;
box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81)
}
.video-container-small iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* YouTube Video-container small End / by Richard Kircher (c)2018/ www.richukunst.ch */

 

 

Alternative
Das Video wird automatisch abgespielt.
 
<!-- YouTube Video-container small Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p></p>
<div class="video-container-wrapper-small">
<div class="video-container-small"><iframe src="https://www.youtube.com/embed/nnEuvgtkeCA?autoplay=1&rel=0" width="560" height="315" allowfullscreen="allowfullscreen"></iframe></div>
<p></p>
</div>
<p></p>
<!-- YouTube Video-container small / by Richard Kircher (c)2018/ www.richukunst.ch -->

 

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
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

 Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg