YouTube Video einbetten

Wie man ein YouTube Video über ein iFrame in eine Webseite einbettet, ist allseits bekannt. Das YouTube dafür diverse Steuerungsparameter zur Verfügung stellt, dann schon weniger.

Somit liste ich an dieser Stelle mal die wichtigsten Paramter auf, mit denen sich das Verhalten des eingebetteten YouTube Videos steuern lässt:
 

Videoqualität

Über den Parameter vq (video quality), den man an die URL anhängt, kann die Auflösung des einzubettenden Videos bestimmt werden:

Auflösung/Qualität Parameter
144p &vq=tiny
240p &vq=small
360p &vq=medium
480p &vq=large
720p &vq=hd720
1080p &vq=hd1080
4K &vq=highres

 

Als Beispiel würde dies für ein Video in 4K-Auflösung so aussehen:
src="https://www.youtube.com/watch?v=oDOXeO9fAg4&vq=highres"

Falls einem nicht bekannt ist, in welcher maximalen Auflösung ein Video bei YouTube vorliegt, ist der Parameter hd=1 nützlich.
src="https://www.youtube.com/watch?v=oDOXeO9fAg4&hd=1"

Das Video wird in einer HD Auflösung abgespielt, wenn vorhanden. Ansonsten in der vorhanden SD Auflösung.
 

Video ab einem bestimmten Punkt abspielen

Mit dem Parameter #t (time) kann ein bestimmter Punkt im YouTube Video angesprungen werden.

Um zum Beispiel das Video erst ab dem Punkt 1 Minute 30 Sekunden abzuspielen, würde die URL so aussehen:
src="https://www.youtube.com/watch?v=oDOXeO9fAg4#t=1m30s"
 

Video wiederholen

Mit dem Parameter loop=1 wiederholt sich das Video in einer Endlosschlaufe.

src="https://www.youtube.com/watch?v=oDOXeO9fAg4&loop=1"
 

Suchfeld ausblenden

Mit dem Parameter search=0 kann das Suchfeld ausgeblendet werden.

src="https://www.youtube.com/watch?v=oDOXeO9fAg4&showsearch=0"

 

Video automatisch abspielen

Mit dem Parameter autoplay=1 ist es möglich das Video direkt nach dem Laden des Videos abszuspielen – ohne erst den Play Button drücken zu müssen.

src="https://www.youtube.com/watch?v=oDOXeO9fAg4&autoplay=1"

 

Keine related Videos anzeigen

Mit dem Parameter rel=0 werden keine ähnliche/verknüpfte Videos nach dem Abspielen des Video mehr angezeigt.

src="https://www.youtube.com/watch?v=oDOXeO9fAg4&rel=0"

 

Regional Filtering umgehen

Einige Videos bei YouTube sind nur in gewissen Ländern und Regionen abspielbar. Für die Lokalsierung ist die eigene IP-Adresse ausschlaggebend. Mit der Verwendung der URL in dieser Weise

src="https://www.youtube.com/v/oDOXeO9fAg4" anstatt src="https://www.youtube.com/watch?v=oDOXeO9fAg4"

kann diese Beschränkung umgangen werden. Natürlich können die einzelnen Parameter mit & kumuliert werden.

src="https://www.youtube.com/watch?v=oDOXeO9fAg4&autoplay=1&showsearch=0&rel=0"

 

YouTube Video mit css responsive machen

Um ein YouTube Video responsive zu machen, braucht man das iFrame nur mit einem div-Element zu verpacken und das Stylesheet entsprechend zu erweitern:

<div class="responsive-container">
  <iframe src="https://www.youtube.com/watch?v=oDOXeO9fAg4" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

.responsive-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.responsive-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}