Videos sind heiß. Schon länger gilt es als schick, Youtube-Clips im Blog oder auf diversen Webseiten einzubinden. Der jüngste Trend ist ein eigener Youtube-Kanal, sei es zum Selbstmarketing oder um seine Inhalte multimedial anzureichern. Allerdings werden auch diese Videos anschließend meist wieder auf irgendwelchen Seiten eingebaut – oder eingebettet wie es im Fachjargon heißt.
Für diejenigen, die das noch nie gemacht haben und sich fragen wie das geht: Gehen Sie auf die jeweilige Youtube-Seite des entsprechenden Videos, klicken Sie anschließend auf den Punkt “Weiterleiten“. Dort wird Ihnen dann die direkte URL des Videos angezeigt, die Sie beispielsweise kopieren und direkt in Facebook einfügen können, um dort das Video zu empfehlen und anzeigen zu lassen.
Wollen Sie den Clip indes im Blog verwenden, müssen Sie noch einmal auf den Punkt “Einbetten” klicken. Dort erscheint dann ein längerer Code der mit <iframe… beginnt (siehe Abbildung – zum Vergrößern bitte anklicken). Den müssen sie vollständig kopieren und können ihn anschließend etwa in einen Blogbeitrag einbinden. Dann wird dort das Video direkt angezeigt.
Achtung: Nicht alle Videos lassen sich einbinden! Manchmal ist die Funktion auf Wunsch des Urhebers deaktiviert. Das sollten Sie respektieren und dann maximal nur einen Link auf das Video setzen (die erste URL).
Die beiden HTML-Befehle width und height bestimmen übrigens die Größe des angezeigten Videos später auf Ihrer Webseite. Sie können die Zahlenwerte darin verändern und so das Erscheinungsbild des Video beeinflussen bis verzerren. Achten Sie also möglichst darauf, dass die Seitenverhältnisse auch beim sogenannten Skalieren erhalten bleiben.
Nun aber zu den drei Tricks zum besseren Einbinden von Youtube-Videos, die ich hier gefunden habe:
Youtube-Logo ausblenden
Wenn Sie zugleich Ihren Youtube-Kanal promoten wollen, hat dieser Trick wenig Sinn. Aber es könnte sein, dass Sie verhindern wollen, dass Ihre Besucher das Youtube-Logo als Absprungzone nutzen, nach dem Betrachten Ihres Clips draufklicken – und weg sind sie. In dem Fall gestattet Ihnen Youtube (was ich durchaus großzügig finde), deren Logo als Quellenangabe komplett auszublenden. Sie brauchen dazu nicht viel mehr machen, als den besagten iframe-Code geringfügig zu modifizieren – und zwar so, indem Sie den Parameter “&modestbranding=1″ an die URL des Videos anhängen. Der fertige Code sieht dann beispielsweise so aus:
Das Ergebnis können Sie auch direkt beim folgenden Video vergleichen: Beim zweiten Clip fehlt rechts unten in der Anzeige das Youtube-Logo…
Video-Empfehlungen deaktivieren
Empfehlungen sind heute Standard im Social Web. Auch am Ende dieses Artikels werden Sie ein paar Artikel finden, die Ihnen dieses Blog automatisch vorschlägt, Motto: Wenn Ihnen dieser Artikel gefallen hat, interessiert Sie vielleicht auch noch…
Youtube macht das genauso. Sobald Sie das Ende eines Clips erreicht haben, werden Ihnen in der Regel weitere Videos angezeigt und vorgeschlagen, die dazu passen und Ihnen ebenfalls gefallen könnten. Immerhin: Sie müssen dazu die vorhandene Seite nicht verlassen. Aber: Womöglich werden dabei auch Videos von Konkurrenten eingeblendet oder irgendwelches krudes Zeugs, das Sie ungerne mit Ihren Inhalten in Verbindung gebracht wissen wollen. Was also tun?
Auch hier gibt es einen einfachen Trick, diese Funktion auszuschalten. Die Menüeinstellung hierfür ist ein bisschen versteckt und wird daher leicht übersehen: Sobald Sie sich über “Weiterleiten” und “Einbetten” zu dem iframe-Code durchgeklickt haben, müssen Sie das Fenster noch ein wenig herunterscrollen. Dann gelangen Sie zu einem Menü, in dem Sie anhaken können, ob nach Ende des Videos vorgeschlagene Videos angezeigt werden sollen (siehe Abbildung).
Nein, sollen Sie nicht! Also entfernen Sie den Haken – und schon sehen Ihre Zuschauer nur noch Ihr Video.
Sie können dies freilich auch manuel im iframe-Code verändern: Den Unterschied macht hier der Einschub “rel=0″. Zum Vergleich:
Und zum Beweis das Ganze direkt umgesetzt bei einem eingebundenen Video – Sie brauchen es aber nicht ganz anzusehen, mit dem Schieberegler vorspulen bis kurz vor Ende reicht:
PS: Und wenn Sie ein schon ein echter Youtube-Ninja sind und den ersten Tipp ebenfalls gleich umsetzen wollen, ergänzen Sie zusätzlich noch ein “&modestbranding=1″, um das Logo auszublenden (auch wie oben) …
So, und nun zum letzten Tipp …
Videos transparent einbinden
Der dritte und letzte Trick ist eher etwas für Profis, die auf ihren Webseiten zusätzlich noch Pop-up-Fenster einsetzen – etwa, um Werbung anzuzeigen. Wer das schon mal versucht hat, hat vielleicht festgestellt, dass iframes die hässliche Angewohnheit haben, sich in den Vordergrund zu drängeln. Die Dinger sind nämlich nicht transparent, wie es Fachleute sagen würden. Dafür sind sie lernfähig, und man kann ihnen diese Fähigkeit beibringen – wieder mit einer kleinen Modifikation im Code:
Haben Sie es bemerkt? Genau: Mit dem Einschub “?wmode=transparent” sorgen Sie dafür, dass die Videos flächig da bleiben, wo sie sollen: im Hintergrund.
Und noch ein Punkt dürfte Ihnen inzwischen aufgefallen sein: Sie können beliebig viele dieser Parameter und Einstellungen innerhalb eines iframe-Codes ergänzen – auch wenn der sich dann zunehmend kryptischer liest. Entscheidend ist dann allerdings, dass Sie diese stets mit einem “&” direkt aneinander schreiben.
Wollten Sie also den obigen Transparenz-Parameter einfügen, obwohl sie schon das Youtube-Logo ausgeblendet und die Anzeige sogenannter Related Videos deaktiviert haben, müssten Sie das “?” durch ein “&” ersetzen und den Befehl direkt anfügen – etwa so:
Sieht hässlich aus, macht aber, was es soll.


Teamarbeit: 11 kaum bekannte Fakten
Powerpoint & Co.: Tipps für bessere Präsentationen
Denksport: 50 Brainteaser für Jobinterviews
Smalltalk-Tipps:



Bewerbungs-Dossiers zu Mappe, Anschreiben, Lebenslauf, Bewerbungsfoto und Zeugnissen.
Die besten Tipps und Dossiers für das Vorstellungsgespräch: So überzeugen Sie jeden Personaler.

Fabian
Punkt 3: Genau genommen ist Flash das Problem, nicht der iFrame. ;)
Ivan Blatter
Kann es sein, dass der erste Trick nur mit Flash funktioniert? Hier auf meinem MacBook Air – ohne Flash, YouTube mit HTML5 – sind beide Videos identisch und mit Logo unten rechts.
Jochen Mai
Ja und Nein. Was du auf den Videos siehst, ist zwar das Youtube-Logo – das aber kannst du ohnehin nicht anklicken (und auch nicht unterdrücken). Die Playeranzeige fehlt bei dir im ungestarteten Modus aber ebenfalls völlig. Ist auf meinem iPad genauso. Der Trick funktioniert also. Nur dass es um das Logo, was du siehst, gar nicht geht.
RainerWein
Vielleicht gibt es auch einen trick, wie ich eine Aktion (wie zum Beispiel eine weiterleitung) ausführen kann, sobald das Video beendet ist?? Da das verwendete Video aber nicht von mir ist, müsste das das auch mit dem iframe irgendwie gehen. Ausser mit einer Zeitschleife in Javascript die nach Länge des Videos weiterleitet hab ich das bisher nicht realisiert bekommen.
Vielleicht gibt es da ja was das mir weiter hilft???
Raphael Sommer
Hervorragende Tipps in deinem Artikel. Vor allem das ich das YouTube Logo ausblenden kann ist top! Vielen dank :)
Daniel
Danke für die Hinweise!
Leider funktioniert bei mir die Ergänzung des Parameters “&hd=1″ nicht. Zumindest bei kleiner Anzeige (480px breit) wird nicht automatisch die HD-Version angezeigt. Hier auf der Seite übrigens auch nicht.
Gibt es Abhilfe?
Raphael Sommer
Seit Google die neue API eingeführt hat ist das leider nicht mehr möglich. Ich suche dafür auch schon lange eine Lösung! Jetzt wird mein Video nur noch in 240p auf meiner Startseite abgespielt und sieht total grässlich aus -> http://www.sommerfilmmusik.ch/ . Jochen Mai hast du uns einen Tipp? :)
Sidenstein
Hat wunderbar geklappt! Endlich spielt das Video von alleine :) Vielen Dank!