Individuelle Anpassung des YouTUBE Video Search Widgets in einer Wordpress-Installation

[conhunter]

Der Mensch ist ein visuelles Wesen, deshalb habe ich vor meinen Blog
in Zukunft stärker mit Video-Informationen zu füttern.
Dazu gibt es die Möglichkeit YouTUBE Videos mit dem Video Search
Widget bzw. Video Search Control (http://www.google.com/uds/solutions/
videosearch/index.html) in seine eigene Internetpräsenz einzufügen.

Das habe ich z.B. auf http://www.blog.concars.de/concept-cars-universum/audi-audi/
ganz unten versucht einzubinden, aber leider nur mit mäßigen Erfolg
Mein Ziel war es vorrangig die Größe des ausgewählten Videos aus dem
YouTUBE-Video-Puzzle etwa an die Größe meiner Inhaltsspalte
anzupassen, also ca. 500-530 px und dann vielleicht sogar das gesamte
Layout dieses fremden Tools. Dazu bietet Google einem auch die
Möglichkeit auf http://www.google.com/uds/solutions/videosearch/reference.html,
doch sämtliche Versuche die Code-Snippets richtig einzubinden,
schlugen fehl.

Die Schwierigkeit ergibt sich dadurch, daß ich es trotz englischer
Dokumentation nicht richtig hinbekomme die importierte
gsvideosearch.css dahingehend zu manipulieren, daß sie meine
Layoutanweisungen ausführt. Irgendwie kollidiert dieser Code mit der
gsvideosearch.js und es kommt ein Kuddelmuddel heraus.

Im Detail:
Der von mir implementierte Code ...



<!-- ++Begin Video Search Control Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the Video Search
Control.
// You can place this anywhere on your page.
-->
<div id="videoControl">
<span style="color:#676767;font-size:11px;margin:10px;padding:
4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not
include it
// or its stylesheet again
//
// The Key Embedded in the following script tag is designed to work
with
// the following site:
// http://www.blog.concars.de
-->
<script src="http://www.google.com/uds/api?
file=uds.js&v=1.0&source=uds-vsw&key=API-KEY"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Video Search Control and Stylesheet -->
<script type="text/javascript">
window._uds_vsw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/videosearch/
gsvideosearch.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.concars.de/wordpress/themes/green-
silhouette-ALFA/gsvideosearch.css");
</style>

<script type="text/javascript">
function LoadVideoSearchControl() {
var options = {
twoRowMode : true
};
var videoSearch = new GSvideoSearchControl(
document.getElementById("videoControl"),
[{ query : "audi concepts"}], null,
null, options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoSearchControl);
</script>
<!-- --End Video Search Control Wizard Generated Code-- -->

</div>



... ist eigentlich der mit Googles Wizard erstellte Code. Ich habe
also versucht die ursprüngliche gsvideosearch.css in meine Wordpress-
Installation einzubinden, aber leider werden die Änderungen im ccs-
Style-Sheet nicht ausgeführt.

Im oberen Code habe ich also nur den Pfad des Verzeichnisses geändert
und auf meinen Wordpress-Ordner bezogen, die meine Layout-
Vorstellungen enthalten sollen.

<style type="text/css">
@import url("http://www.concars.de/wordpress/themes/green-
silhouette-ALFA/gsvideosearch.css");
</style>

Leider funktioniert nur das div-Element <div id="videosearch"> meiner
eigenen style.css, alles andere wird nicht angezeigt. Worin liegt der
Fehler?

Hat jemand das gleiche Problem beim Implementieren auf seiner Seite
gehabt und wie hat er das Problem technisch gelöst?