Video Search Control
- Youtube Widgets, die Zweite
- 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....
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;.
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
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
