Mit YouTube ist es Ihnen möglich, Ihre Website mit der Hintergrundmusik Ihrer Wahl zu personalisieren. War diese Möglichkeit früher nur mithilfe von iframes verfügbar, erhalten Sie in dieser Anleitung die notwendigen Schritte, um Ihre Hintergrundmusik auch auf anderem Wege auf Ihre Website oder Ihren Blog einzubinden.

Hintergrundmusik auf Ihrer Homepage einbinden – Schritt 1

Zuerst muss das gewünschte Video auf YouTube gefunden werden. In erster Linie entscheidet Ihr persönlicher Geschmack, dennoch sollten wenige Hintergrundgeräusche zu hören sein. Wichtig ist hierbei nur die Musik, das Video selbst, und was darauf zu sehen ist, wird später nicht auf Ihrer Webseite zu sehen sein. Haben Sie das gewünschte Musikstück gefunden, klicken Sie auf den Button „Teilen“, der sich direkt unter jedem Video befindet.

Hintergrundmusik auf Ihrer Homepage einbinden -Schritt 2

Nachdem Sie auf „Teilen“ geklickt haben, erscheint ein Menü, mit dem YouTube-Link und den Möglichkeiten, das Video einzubetten und in einer E-Mail weiterzuempfehlen. Für die Einbindung auf einer Website ist nur der Punkt „Einbetten“ wichtig, der sich direkt neben dem verkürzten YouTube-Link befindet.

Hintergrundmusik auf Ihrer Homepage einbinden -Schritt 3

Wenn Sie nun auf „Einbetten“ klicken, erhalten den Einbettungscode und weitere Optionen zur Auswahl. Unter diesem Code befinden sich vier Wahlmöglichkeiten, deren Auswahl sich jeweils auf den Link auswirken. Interessant für das Einbinden von Hintergrundmusik sind nur die letzten beiden Punkte: „Erweiterten Datenschutzmodus aktivieren“ und „Alten Einbettungscode verwenden“. Diese beiden Haken müssen Sie aktivieren.

Erst danach dürfen Sie den Code kopieren, da er sich mit dem Setzen der beiden Häkchen noch verändert. Den kopierten Code fügen Sie dann zur weiteren Bearbeitung in ein Textfeld auf Ihrer Webseite ein. Sie können ihn zuerst auch in ein Schreibprogramm einfügen, wenn dies für Sie die Änderung des Links erleichtert.

 

Hintergrundmusik auf Ihrer Homepage einbinden -Schritt 4

Nun erfolgt die Änderung des Originalcodes, sodass beim Aufrufen der Website die Hintergrundmusik automatisch gestartet wird.

 

Html-Code:

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

 

Wie bereits schon erwähnt, muss der Code noch geändert werden, damit auch das gewollte Ergebnis ausgeführt wird. Hierfür sucht man den Bereich, den wir im oberen Beispiel Orange markiert haben, und löscht diesen raus.

 

Html-Code:

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0“></param><embed src=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0” type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

 

Wenn Sie, wie bei Bild zwei dargestellt, richtig gelöscht haben, sind die beiden Links, in unserem Beispiel Grün dargestellt, nur durch “></param><embed src=” getrennt. Nun wird jeweils nach „rel=0“, aber noch vor dem Anführungszeichen, &autoplay=1 eingefügt. Danach sollte der Link wie folgt aussehen:

 

Html-Code:

<object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0&autoplay=1“></param><embed src=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0&autoplay=1” type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object>

 

Würden Sie nun diesen Code auf Ihre Webseite einfügen, startet zwar die Musik, aber das Video wäre ebenso sichtbar. Damit das Video nicht erkennbar ist, wird es auf eine Größe von 1 x 1 Pixel verkleinert und außerhalb des Bildschirms geschoben. Dafür wird der blaue Code an den Anfang und das Ende des Ausgangscodes gestellt:

 

Html-Code:

<div style=”width:1px;height:1px;margin-left:-999999em;overflow:hidden;”><object width=”560″ height=”315″><param name=”movie” value=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0&autoplay=1″></param><embed src=”http://www.youtube-nocookie.com/v/d9NF2edxy-M?version=3&amp;hl=de_DE&amp;rel=0&autoplay=1″ type=”application/x-shockwave-flash” width=”560″ height=”315″ allowscriptaccess=”always” allowfullscreen=”true”></embed></object></div>

Den fertigen Code fügen Sie nun über das PLUS Symbol im Editiermodus von Webvisitenkarte.net -> HTML auf Ihrer Homepage ein. Viel Erfolg!

Tweet

Weitere interessante Artikel:

• Jetzt kostenlose Homepage erstellen
• Google+1 – was steckt dahinter?
• Hilfe: Tabellen erstellen
• Fehler in Web-Texten vermeiden
• Hilfe: YouTube und Vimeo-Videos in die Homepage einbinden
• Freitags-Dankeschön: Kostenlose Icons für Ihre Homepage

Bleiben Sie auf dem Laufenden: