Einbinden von Videos
Videos von YouTube lassen sich eigentlich recht leicht mit dem von YouTube zur Verfügung gestellten iFrame-Schnipsel einbinden. Wer etwas mehr möchte, kann auf geeignete Plugins zurückgreifen. Auf dieser Seite stellen wir Ihnen beide Varianten und weiterhin ein einfaches Plugin vor, mit dem Sie ein Video von YouTube vor einen abgedunkelten, transparenten Hintergrund öffnen können.
Übersicht, Varianten und Code-Listing:
- Ein Hinweis zum Video
- Einbinden mit und ohne Plugin
- Code-Listing für ein einfaches Plugin
Ein Hinweis zum Video
Für die durchgeführten Tests, zu denen wir Einzelheiten auf dieser und auf der nachfolgenden Seite veröffentlichen, wurde ein Video mit einem der schönsten Evergreens aller Zeiten in der Originalfassung von Melina Mercouri gewählt, wobei der Titel “Ta pedia tou Pirea” den meisten älteren Mitmenschen wohl eher unter dem Titel “Ein Schiff wird kommen” von Lale Andersen bekannt sein dürfte.
Einbinden ohne Plugin
Videos von YouTube lassen sich in bestehende Webseiten eigentlich recht leicht mit den von YouTube bereitgestellten Code-Schnipseln einbinden, wobei die neuere Version des Codes, bei der die Einbindung per iFrame erfolgt, vorzuziehen ist. Auffällig an den Code-Schnipseln ist lediglich, dass in letzter Zeit (Stand: August 2013) bei der Referenzierung auf eine Angabe des Übertragungsprotokolls verzichtet wurde. Vermutlich wird davon ausgegangen, dass die Browser selbst erkennen sollen, ob es sich um einen HTTP- oder HTTPs-Request handelt und das Protokoll übernommen wird, mit dem die Webseite im Browser aufgerufen wurde.
Ob erlaubter Standard oder nicht, in den beiden Beispielen auf dieser Seite referenzieren wir dennoch die Ressourcen vollständig mit Angabe des Protokolls (http:), wobei Id-des-Videos gegen den eindeutigen Bezeichner zur Identifizierung des Videos auszutauschen ist:
<iframe width="640" height="360" src="http://www.youtube.com/embed/Id-des-Videos" frameborder="0" allowfullscreen></iframe>
Die zweite Variante, bei der sich lediglich die URL in youtube-nocookie.com wandelt, entspricht dem erweiterten Datenschutzmodus. Nach den derzeitigen Angaben von YouTube werden bei Verwendung dieser Variante nur dann Informationen über Besucher der Webseite gespeichert, wenn diese das Video abspielen, nicht aber bei einem einfachen Aufruf der einbindenden Webseite. Ein Beispiel mit der URL für den erweiterten Datenschutzmodus:
<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/Id-des-Videos" frameborder="0" allowfullscreen></iframe>
Über eine weitere Schnittstelle sind Vorschaubilder in unterschiedlichen Größen erreichbar. Wie bereits weiter oben beschrieben, ist auch bei den nachfolgend aufgeführten Beispielen Id-des-Videos gegen den eindeutigen Bezeichner des Videos auszutauschen ist. Bei einer Testabfrage wurden Images mit den folgenden Größen von YouTube ausgeliefert:
http://img.youtube.com/vi/Id-des-Videos/default.jpg 120px × 90px http://img.youtube.com/vi/Id-des-Videos/mqdefault.jpg 320px × 180px http://img.youtube.com/vi/Id-des-Videos/hqdefault.jpg 480px × 360px http://img.youtube.com/vi/Id-des-Videos/sddefault.jpg 640px × 480px http://img.youtube.com/vi/Id-des-Videos/maxresdefault.jpg 1.280px × 720px
Wer sich auf einer Webseite eine kleine Auswahl zusammenstellen möchte, um über diese entweder die zugehörigen Videos direkt aufzurufen oder aber eine weitere Seite, in der das jeweils entsprechende Video per iFrame eingebunden ist, könnte diese Bilder einfach mit einem entsprechenden Link zur Ressource oder zur Zielseite versehen. Ein Beispiel:
<a href="http://www.example.com/zielseite-mit-video/">
<img src="http://img.youtube.com/vi/Id-des-Videos/default.jpg" alt="Ein Video"
style="border:none" width="120" height="90" /><br />Seite mit Video</a>
Ein wenig komplizierter wird die Angelegenheit, wenn zur Einbettung von Videos ein geeignetes Plugin verwendet oder entwickelt werden soll. Wer ein für Videos geeignetes Plugin benutzen möchte und über keine oder nur geringe Kenntnisse in CSS, JavaScript und PHP verfügt, sollte sich zuerst im Plugin Directory von WordPress umschauen. Die dort vorgestellten Plugins haben den Vorteil, dass sie von WP auf Einhaltung der Richtlinien geprüft werden.
Wer es sich hingegen zutraut ein eigenes Plugin zu entwickeln, derjenige findet auf der nachfolgenden Seite einen möglichen Lösungsansatz.
weiterlesen » Code-Listing für ein einfaches Plugin
