Film ab!

Video Search Control

  1. Youtube Widgets, die Zweite
  2. Video Search Control

Ansprechendes Style Sheet für das Video Search Control

Das Aussehen des Controls auf der Webseite, so wie Sie es in der Abbildung Video Search Control sehen, konfigurieren Sie bei Bedarf mit einem eigenen Style Sheet, indem Sie bestimmte Attribute überschreiben.

<style type="text/css">
#videosearch {
width: 400px;
margin: 10px;
padding: 4px;
border: 3px solid #0080FF;
}</style>

Während die Voreinstellung für die Höhe (Stilattribut height) in der Regel passt, hat es sich bewährt, die Breite des Controls auf 400 Pixel zu setzen (width: 400px;). Mit der Eigenschaft margin bestimmen Sie den Abstand des Controls zum übergeordneten Container oder zu den Fensterrändern.Ein Wert gilt für alle Richtungen, Sie können auch für jede Richtung in der Reihenfolge oben, rechts, unten, links einen separaten Wert angeben wie margin : 10px 20px 20px 30px;.

Youtube-Widgets programmieren in Bildern

© Archiv

Sobald Sie ein Miniaturbild anklicken, erscheint der Video Player direkt im Control. Über die untere Verknüpfung mit dem Titel des Videos gelangen Sie zur YouTube-Videoseite.

Analoges gilt für padding im Verhältnis des Inhalts zu den Rändern des Video Search Controls. Mit dem Attribut border zeichnen Sie einen Rahmen um das Search Control. Möchten Sie keinen Rahmen, so lassen Sie dieses Attribut einfach weg oder setzen die Rahmenstärke auf border: 0px. Die Farbe des Rahmens legen Sie gegebenenfalls mit einem RGB-Wert fest.

Beachten Sie, dass Angaben für Rahmendicke und Rahmenfarbe nur interpretiert werden, wenn gleichzeitig der Rahmentyp angegeben wird. Der Eintrag solid steht für eine durchgezogene Linie. Standardmäßig passt sich das Video Search Control der Hintergrundfarbe der Webseite an. Wenn Sie wollen, können Sie für das Control mit dem Attribut background-color aber auch eine eigene Hintergrundfarbe festlegen wie background-color: #FFFF80;.

Unsichtbares Video Search Control

Youtube-Widgets programmieren in Bildern

© Archiv

Personalisiertes Video Search Control: Um es auf der Webseite verwenden zu können, benötigen Sie einen AJAX Search API Key.

So schön das Video Search Control auch sein mag, nimmt es nichtsdestoweniger Platz auf der Webseite weg. Möglicherweise möchten Sie ja, dass das Control erst dann erscheint, wenn ein Besucher es ausdrücklich verwenden will.

Dazu verstecken Sie das Video Search Control mit dem standardmäßgen Wert hidden für die CSS-Eigenschaft visibility und stellen auf Ihrer Webseite einen entsprechenden Link zur Verfügung. Auf der Heft-DVD zeigt das Beispiel videosearchcontrol2.htm dazu den Eintrag Nach YouTube-Videos suchen.

<span id="videosearch" style=
"visibility: hidden"></span><a id="suchen" href=
"javascript:VSCein();"> Nach YouTube-Videos suchen</a>

Wenn ein Besucher den Link anklickt, kommt die selbstdefinierte JavaScript-Funktion VSCein() - der Name ist natürlich frei wählbar - zum Zug.

function VSCein()
{ document.getElementById
("videosearch").style.visibility = "visible";
document.getElementById("suchen").
style.visibility = "hidden"; }

Im Rumpf der Funktion setzen Sie das Stilattribut visibility des Video Search Controls auf visible. Mit der Verknüpfung machen Sie es genau andersherum, diese lassen Sie verschwinden.

Die jeweiligen HTML-Elemente - das Control und die Verknüpfung - sprechen Sie im Code mit der Methode getElementById() an, der Sie die jeweilige ID übergeben. Im Ergebnis erscheint nun das Video Search Control anstelle der Verknüpfung.

Video Search Control - Codegenerator

Auch für das Video Search Control Widget existiert ein Codegenerator mit einer Vorschaufunktion. Dieser generiert den Search-API-Schlüssel gleich mit. Die Adresse ist www.google.com/uds/solutions/wizards/videosearch.html.

Um das Ergebnis nachträglich anzupassen, müssen Sie aber zumindest wissen, wie sich die einzelnen Codeteile zusammensetzen.

Video Search Control Programming Guide

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.…