Site mit Videos selbst gemacht

Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website

Sie möchten auf Ihrer Webseite Inhalte von YouTube platzieren, haben jedoch nur wenig Erfahrung mit HTML und JavaScript und kennen keine serverseitigen Skriptsprachen.

  1. Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website
  2. Teil 2: Youtube-Widgets: So platzieren Sie Youtube-Videos auf ihrer Website
  3. Video Bars auf der Webseite
Youtube-Widgets

© Archiv

Youtube-Widgets

Definitionsgemäß handelt es sich bei den Widgets um kleine Applikationen, die Sie auf einer Webseite einbetten. YouTube bietet zwei davon an, das Video Search Control und die Video Bar, um die es hier geht. Die Video Bar ist schnell eingerichtet, ohne dass es dazu besonderer Voraussetzungen bedürfte. Nichtsdestotrotz bietet sie einiges an Komfort. Vorhandene Programmierkenntnisse können Sie nachträglich immer noch ins Spiel bringen.

Video Bar Wizard

Mit der Video Bar integrieren Sie auf Ihrer Homepage eine Leiste von Video-Thumbnails. Aussehen und Inhalte bestimmen Sie selbst. Ihre Besucher spielen ein Video direkt auf Ihrer Webseite ab, indem Sie dort dessen Miniaturbild anklicken. Für den schnellen Einstieg stellt Google einen Codegenerator zur Verfügung. Die Adresse lautet www.google.com/uds/solutions/wizards/videobar.html oder alternativ http://code.google.com.

Youtube-Widgets

© Archiv

Google AJAX Search API: Codegenerator für die Video Bar

Auf der Seite nutzen Sie Verknüpfungen wie zu AJAX APIs, Google AJAX Search API, Multimedia Search, Video Bar, Start with the Wizard oder www.youtube.com. Ganz unten auf der Seite finden Sie Verknüpfungen zu Entwickler Widgets, wizard - im Abschnitt Widgets/Video Bar.

Legen Sie hier die Ausrichtung der Video-Thumbnails (vertikal oder horizontal) sowie deren Auswahl fest, wobei Sie gegebenenfalls verschiedene Parameter miteinander kombinieren (etwa Most Viewed Videos mit einem bestimmten Musikinterpreten, den Sie im Feld Search Expressions angeben).

Mehr brauchen Sie nicht zu tun. Den Code (Schaltfläche Show Code) übernehmen Sie unverändert für Ihre Webseite. Platzieren Sie diesen an einer beliebigen Stelle innerhalb des body-Tags. Alternativ lagern Sie den Code aus (Head-Bereich, externe Datei) und referenzieren ihn anschließend per ID ().

Ob Sie den Codegenerator verwenden oder nicht, bleibt selbstverständlich Ihnen überlassen. Im Übrigen steht es Ihnen jederzeit frei, den Code manuell anzupassen, wenn Sie mit dem Ergebnis noch nicht ganz zufrieden sind. Voraussetzung ist aber, dass Sie zumindest in groben Zügen wissen, wie sich die einzelnen Codeteile zusammensetzen.

TIPP

Es macht auch Sinn, den Video Bar Wizard zu verwenden, wenn es Ihnen nur auf einzelne Anweisungen ankommt. Die übernehmen Sie dann einfach oder lassen sich einfach nur zeigen, wie etwas funktioniert. So vergleichen Sie zum Beispiel die vom Wizard auf Grund Ihrer Vorgaben erzeugte JavaScript-Funktion LoadVideoBar mit der in Ihrem Code.

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…