Videos auf YouTube
Verwenden von Videos von YouTube (www.youtube.com) auf der eigenen Website.
Gilt sinngemäß auch für andere Anbieter von Plattformen für Videos, Musik oder Fotos.
Überblick
- Die Beschreibung der Vorgangsweise, wie das Video einzufügen ist, muss man auf der Website des Anbieters suchen. Bei YouTube (www.youtube.com) verwendet man den Text der unter "Einbetten" steht.
Bei YouTube (www.youtube.com) befinden sich die entsprechende Anleitung auf der Startseite ganz unten. Bei der Gruppe der Hyperlinks befindet sich ganz rechts unter "Entdecken" als zweiter von oben der Hyperlink "YouTube auf deiner Site". Auf dieser Seite steht unter "Grundlegende Informationen" der Eintrag "Wie füge ich meinem Blog oder meiner Webseite ein Video hinzu?"
Man kann Videos, die auf YouTube gespeichert sind, auf der eigenen Website benutzen. Das Video bleibt dabei auf YouTube gespeichert und verbraucht daher auf dem eigenen Webserver keinen Webspace und verursacht somit auch kein eigenes Downloadvolumen (traffic).
Es gibt zwei Varianten, wie man Videos von YouTube auf der eigenen Website benutzen kann: entweder als normalen Hyperlink einfügen oder als "Objekt" einbetten.
Variante Hyperlink:
Wie man ein T-Shirt in 2 Sekunden zusammenfaltet.
Ergebnis: Klickt der/die BenutzerIn auf den Hyperlink, öffnet der Browser die entsprechende Seite von YouTube mit dem Video. Der/die BenutzerIn ist dann auf der YouTube Website und nicht mehr auf eurer.
Anmerkung: Wie bei jedem Hyperlink kann auch eine Grafik, z.B. ein aussagekräftiges Szenenbild aus dem Video, verwendet werden:
Variante Einbetten:
Wie man ein T-Shirt in 2 Sekunden zusammenfaltet.
Ergebnis: Das Video verbraucht relativ viel Platz (Größe des Videos, genauer seine Auflösung), aber der/die BenutzerIn bleibt auf eurer Website.
Vorbereitung
Möchte man bestehende Videos von YouTube verwenden, so kann man dies ohne weitere Vorbereitungen machen. Allerdings kann die Person, die das Video hochgeladen hat, die Funktion "einbetten" deaktivieren, sodass nur die Variante mittels Hyperlink verwendet werden kann.
Möchte man eigene Videos verwenden, somuss man diese zuvor auf YouTube hochladen. Dazu muss man bei YouTube registriert sein. Da YouTube zur Google Inc. gehört, ist genügt dafür ein "Google-Konto", bzw. ist das Registrieren bei YouTube das Anlegen eines Google-Kontos.
Wie man in YouTube Videos hochlädt, erfährt er auf den Hilfeseiten von YouTube. Technische Aspekte eines Videos und wie man Videos dreht müsst ihr euch selbst erarbeiten, bzw. von Dritten erstellen lassen. Nutzt ihr solche Leistung von anderen, so sollte dies in der Dokumentation der Projektarbeit erwähnt werden.
Einfügen als Hyperlink
Wenn man das Video als Hyperlink einfügt, geht man so vor wie bei jedem anderen Hyperlink. Auf der eigenen Webseite (HTML-Datei) fügt man einen Text oder ein Bild ein, der oder das als Hyperlink dienen soll. Als Ziel (href: hyper reference) dient dann die Internetadresse (URL: Uniform Resource Locator) des Vidoes auf YouTube.
Wie kommt man zur URL?
Auf der YouTube Webseite sind unterhalb des Videos mehrere Informationen eingeblendet: Der Titel des Videos, wer es hochgeladen hat, wie oft das Video angesehen wurde und wie viele es "geliked" haben.
Darunter ist noch eine Zeile, in der man weitere Informationen und Funktionen abrufen kann. Neben der Funktion "Hinzufügen" (Plus-Symbol) gibt es die Funktion "Teilen" (Pfeil-Symbol). Teilen ist eine ziemlich schlechte Übersetzung des englischen Orignals "share", was auch so viel heißt wie "etwas gemeinsam benutzen" und "jemanden an etwas teilhaben lassen".
Klickt ihr auf "Teilen", so öffnet sich darunter ein Bereich mit weiteren Informationen. Dort braucht ihr die Funktion "Teilen" (rot unterstrichen). Da diese schon aktiviert ist, braucht ihr nichts weiter auswählen.
Unterhalb der Logos (Hyperlinks) zu verschiedenen Sozialen Medien steht ein Textfeld mit einer URL, die mit "http://youtu.be/" beginnt - dies ist die Kurzfassung für SMS, Twitter und Co. Für Browser ist die orignale Version der URL besser, die ihr aus der Adressleiste des Browser kopieren könnt.
Praktisch macht es kaum einen Unterschied, welche der beiden URLs ihr auf eurer Website verwendet. Die Kurzfassung mit "http://youtu.be/" leitet beim Aufrufen sofort auf die Webseite mit der "langen" URL weiter, dauert also einen kleinen Moment länger.
Eine weitere Möglichkeit zur Internetadresse zu kommen, ist das Kontextmenü beim Mausklick in den Bereich, in dem das Video angezeigt wird (Windows: Klick mit der rechten Maustaste; Mac: "ctrl"-Taste drücken und Mausklick oder die Maustaste länger gedrückt halten.) Im Kontextmenü den Befehl "Video-URL kopieren" auswählen. Die URL wird damit in die Zwischenablage kopiert. In diesem Beispiel ist sie "https://youtu.be/xJEuEpj5Iqk".
Anmerkung: Der Befehl "Video-URL an dieser Stelle kopieren" bewirkt, dass das Video ab der Stelle abgespielt wird, an der es sich in diesem Moment befindet. In diesem Beispiel ist sie "https://youtu.be/xJEuEpj5Iqk?t=21", das Video beginnt also erst ab der 21. Sekunde.
Hilfe: Onlinehilfe von YouTube
Kapitel Videos teilen - Optionen zum Teilen von YouTube-Videos
https://support.google.com/youtube/answer/57741
Einbetten als Video
Inhalte anderer Websites können mit dem HTML-Element iframe als "eingebetteter Frame" in einer eigenen Webseite angezeigt werden. Dafür sollte man als HTML-Version HTML5 verwenden, denn nur in dieser sind iframes (wieder) erlaubt.
Wie kommt man zum HTML-Code?
Auf der YouTube Webseite sind unterhalb des Videos mehrere Informationen eingeblendet: Der Titel des Videos, wer es hochgeladen hat, wie oft das Video angesehen wurde und wie viele es "geliked" haben.
Darunter ist noch eine Zeile, in der man weitere Informationen und Funktionen abrufen kann. Neben der Funktion "Hinzufügen" (Plus-Symbol) gibt es die Funktion "Teilen" (Pfeil-Symbol). Teilen ist eine ziemlich schlechte Übersetzung des englischen Orignals "share", was auch so viel heißt wie "etwas gemeinsam benutzen" und "jemanden an etwas teilhaben lassen".
Klickt ihr auf "Teilen", so öffnet sich darunter ein Bereich mit weiteren Informationen. Dort ist die Funktion "Teilen" (rot unterstrichen) aktiviert, wir brauchen aber die Funktion "Einbetten", also klicken wir auf diese.
Es wird ein Textfeld eingeblendet und darunter "MEHR ANZEIGEN". Wenn ihr darauf klickt, öffnen sich ein Bereich mit mehreren Möglichkeiten.
Im größeren Textfeld steht der HTML-Code für das Einbetten und darunter weitere Auswahlmöglichkeiten. Hier könnt ihr unter anderem die Größe des einzubettenden Videos auswählen. Jede Änderung passt sofort den HTML-Code an. Hat man alle erwünschten Änderungen durchgeführt, kopiert man den HTML-Code. Diesen kann man im Webeditor in der Codeansicht (wichtig!) an der gewünschten Stelle einfügen.
Eine weitere Möglichkeit zum HTML-Code zu kommen, ist das Kontextmenü beim Mausklick in den Bereich, in dem das Video angezeigt wird (Windows: Klick mit der rechten Maustaste; Mac: "ctrl"-Taste drücken und Mausklick oder die Maustaste länger gedrückt halten.) Im Kontextmenü den Befehl "Einbettungscode kopieren" auswählen. Der HTML-Code wird damit in die Zwischenablage kopiert. In diesem Beispiel ist er: <iframe width="426" height="240" src="https://www.youtube.com/embed/xJEuEpj5Iqk" frameborder="0" allowfullscreen></iframe>
Der Nachteil dieser Variante ist, dass ihr keine Einstellungen anpassen könnt - bzw. nur händisch im HTML-Code selbst.
Auf der eigenen Webseite wird an der gewählten Stelle das (erste Bild des) Videos angezeigt und zwar in der Größe des Videos selbst. (Anmerkung: Die meisten Webeditoren zeigen nicht das erste Bild an, sondern nur eine graue Fläche.) Klickt der/die BenutzerIn auf das Bild, wird das Video abgespielt. Der/die BenutzerIn bleibt dabei auf eurer eigenen Webseite.
Hilfe: Onlinehilfe von YouTube
Kapitel Videos und Playlists einbetten
https://support.google.com/youtube/answer/171780
Parameter im Quellcode anpassen
Wollt ihr mehr Möglichkeiten nutzen, um das Abspielen zu beeinflussen, dann müsst ihr nach dem Einfügen in die eigene Website dort den HTML-Quellcode bearbeiten.
Hier müsst ihr die Werte der entsprechenden Parameter ändern oder neue Parameter und Werte einfügen. Dies macht man am Ende der URL, die als Wert des Attributs src im eingefügten Quellcode steht, z.B. src="http://www.youtube.com/watch?v=P28FQns0OoM"
Je nachdem auf welche der oben beschriebenen Weisen man die URL oder den HTML-Code kopiert, kann er recht unterschiedlich aussehen. Beide untenstehenden URLs bewirken jedoch das selbe Ergebnis:
https://www.youtube.com/watch?v=P28FQns0OoM&t=21
http://youtu.be/P28FQns0OoM?t=21s
Anhängen neuer Parameter-Werte-Paare
Sind in der URL schon Parameter angegeben, so existieren schon ein "query string", der mit einem Fragezeichen eingeleitet wird und es darf kein weiteres Fragezeichen eingefügt werden. Am Ende der URL fügt man (nach den vorherigen Parameter) ein "&" (kaufmännisches Und, Ampersand) ein, danach den Namen des Parameters, ein "=" (Ist-Gleich-Zeichen) und danach den Wert (ohne Anführungszeichen) - alles ohne Leerzeichen dazwischen.
z.B. aus
http://youtu.be/P28FQns0OoM
wird
http://youtu.be/P28FQns0OoM?t=21
Sind in der URL noch keine Parameter angegeben, so fügt man an Ende der URL ein "?" (Fragezeichen) ein, danach den Namen des Parameters, ein "=" Ist-Gleich-Zeichen und danach den Wert (ohne Anführungszeichen) - alles ohne Leerzeichen dazwischen.
z.B. aus
http://www.youtube.com/watch?v=P28FQns0OoM
wird
http://www.youtube.com/watch?v=P28FQns0OoM&t=21
Dazu müsst ihr, falls nicht vorhanden, an die URL ein Fragezeichen anhängen Danach fügt ihr die Bezeichnung des gewünschten Paramters ein, danach ein Fragezeichen und dann den gewünschten Wert (ohne Anführungszeichen). Wollt ihr weitere Parameter anhängen, so müsst ihr diese mit einem "Kaufmännischen Und" (Ampersand) & vom vorherigen trennen. Wichtig ist, dass keine Leerzeichen in der URL vorhanden sein dürfen.
Beispiele für Parameter:
Sollen keine Informationen wie Videotitel und "Hochlader" am oberen Rand eingeblendet werden:
showinfo=0
Sollen am Ende des Vidoes keine "vorgeschlagene Videos" angezeigt werden:
rel=0
Soll das Video erst mit der 15 Sekunde beginnen:
t=15
Die URL kann dann z.B. wie folgt ergänzt werden:
src="http://www.youtube.com/watch?v=P28FQns0OoM?showinfo=0&rel=0
Ändern der Werte von Paramter
Soll ein Parameter einen anderen Wert bekommen, einfach den Wert in der URL überschreiben.
Welche Parameter gibt es
Die offizielle Liste der möglichen Parameter findet ihr unter der "Entwickler-Website" von Google:
YouTube Embedded Player Parameters:
developers.google.com/youtube/player_parameters?hl=de-DE (Englisch)
Weitere Informationen zu einigen Parameter z.B. auf
10 praktische YouTube URL Tricks:
blog.pcspezialist.de/2009/04/21/10-praktische-youtube-url-tricks/
Anmerkung: Der "YouTube Link Generator" ist nicht mehr online.
YouTube Videos einbinden per Code:
ralf-schmitz.info/2011/11/22/youtube-videos-einbinden-per-code/
Es gibt auch ein kleines Tool für die Parameter auf
tuttowebvideo.com/wp-content/uploads/generatore-codice-embedding-youtube.htm.
Unterschiedliche Parameter-Angaben
Je nachdem auf welche der oben beschriebenen Weisen man die URL oder den HTML-Code kopiert, kann er recht unterschiedlich aussehen. Beide untenstehenden URLs bewirken jedoch das selbe Ergebnis:
https://www.youtube.com/watch?v=P28FQns0OoM&t=21
http://youtu.be/P28FQns0OoM?t=21s
"Ungenauigkeiten"
- Es kann als Protokoll http oder https (secure = verschlüsselte Übertragenung) angegeben sein. Üblicherweise brauchen Videos nicht verschlüsselt übertragen werden. Wenn ein jedoch ein Video in einer verschlüsselt übertragenen Website eingebaut ist, würde der Browser bei einem unverschlüsselt übertragenen Video eine Warnung ausgeben.
- In der Langform der URL wird die Video-Id als Parameter angegeben, in der Kurzform als Name (genauer: Verzeichnis). Da diese Form auf die Langform umleitet, dauert dies einen Bruchteil länger.
- Manchmal ist kein "query string" mit Fragezeichen angegeben, aber trotzdem ein Parameter mit dem Rautenzeichen "#" angehängt, z.B. #t=15. Einfach so belassen.
- Beim Paramter "t" (Zeitangabe) steht manchmal nur der Wert, manchmal ist ein "s" an den Wert angehängt.
Ist keine Einheit angegeben, so wird für den angegebenen Wert die Einheit Sekunden angenommen. Soll das Video z.B.mit der 5 Minute gestartet werden, kann man t=5m angeben,Soll das Video mit der ersten Stunde (60 Minuten) gestartet werden, kann man t=1h angeben. Man kann die Einheiten auch mischen, z.B. mit t=1h15m20s (hours, minutes, seconds) startet das Video an der Stelle 1 Stunde, 15 Minuten und 20 Sekunden.
Rechtliche Aspekte
Vorsicht: "In den Geschäftsbedingungen (Nutzungsbedingungen von YouTube) behält sich YouTube vor, hochgeladene Inhalte (Videos) weiterzuverkaufen oder zu lizenzieren, ohne den Autor vorher fragen zu müssen."
"In Deutschland ist nach Aussage des Rechtswissenschaftlers Thomas Hoeren das Ansehen von YouTube-Videos in keinem Falle strafbar und das Herunterladen nur dann, wenn die Quellen offensichtlich rechtswidrig sind. Klare Definitionen zu „offensichtlich rechtswidrig“ gebe es laut Hoeren nicht, auch seien ihm Abmahnungen zu solchen Quellen unbekannt."
Quelle: http://de.wikipedia.org/wiki/YouTube#Rechtliche_Aspekte
Formatieren mit CSS
Natürlich kann man die Ansicht des Videos (Position, Rahmen etc.) wie bei allen HTML-Elementen mit CSS anpassen.
Je nachden wie das Video "eingebaut" wurde, kann man den Hyperlink <a>, das Bild <img> oder den eingebetteten Frame <iframe> ansprechen. Wenn ein div um die Videos eingefügt und mit der id, z.B. mit dem Namen "videos" versehen wurde, kann man folgende Selektoren verwenden:
#videos a {…}
#videos a img {…}
#videos iframe {…}
Weiterführende Informationen
Hilfe auf YouTube: in der Fusszeile, ganz rechts steht Hilfe
draufklicken, Box öffnet sich, ganz unten nochmals auf Hilfe klicken, oder direkt:
https://support.google.com/youtube/
YouTube für Entwickler: https://www.youtube.com/yt/dev/de/
YouTube for Developers: https://www.youtube.com/yt/dev/ (Englisch)