Tutorial: YouTube-Videos in Blogs mit hoher Qualität einbinden und abspielen

Obgleich YouTube schon seit einiger Zeit die Möglichkeit bietet, bei entsprechend gutem Ausgangsmaterial Videos auch mit hoher Qualität zu betrachten, so gilt dies offiziell nur, wenn das Video auch auf der YouTube-Webseite betrachtet wird. Der Hauptverbreitungsweg von YouTube liegt jedoch in der Einbindung auf fremden Webseiten. Und dort ist es leider nicht ganz so einfach, denn dort haben die Nutzer nicht die Möglichkeit, zwischen der Standard-Qualität und der hohen Qualität zu wechseln. Prinzipiell bekommen sie immer die Standard-Version serviert. Das kann man aber ändern.

Um YouTube mitzuteilen, dass er nicht die Standard-Version streamen sondern sich der hochqualitativen Version bemächtigen soll, muss man den Quellcode des embedded Codes mit einem Hack leicht modizifieren. Doch wo liegt eigentlich genau der Unterschied zwischen einem normalen Video und der hochqualitativen Version des gleichen Films? Schauen wir uns doch dafür mal zwei Videos an:

Kate Perry – I Kissed A Girl
Standardversion

Kate Perry – I Kissed A Girl
High-Quality-Version

Wie man sieht, ist die hochqualitative Version nicht nur bzgl. des Videos in deutlich besserer Qualität. Auch der Sound klingt besser. Der Nachteil beim Video ist natürlich die größere Datenmenge, die übertragen werden muss. Wer also eine langsame Verbindung hat, dürfte eher Probleme bekommen als bei der Standard-Version. Das muss jeder für sich entscheiden.

Um auf seiner Webseite die hochqualitative Version einzubinden, muss man im embedded Code folgende Passage &ap=%2526fmt%3D18 an das Ende der URL einbinden, die im Bereich “param value” und “embed src” genannt wird. In dem von mir genannten Beispiel würde der Code also folgendermaßen aussehen:

<object width=”500″ height=”405″><param name=”movie” value=”http://www.youtube.com/v/GGT1jQdp1RY&hl=de&fs=1″></param><param name=”allowFullScreen” value=”true”></param><embed src=”http://www.youtube.com/v/GGT1jQdp1RY&hl=de&fs=1&ap=%2526fmt%3D18” type=”application/x-shockwave-flash” allowfullscreen=”true” width=”500″ height=”405″></embed></object>

Beachtet bitte, dass ich die Größe des Videos in den obigen Beispielen zusätzlich verändert habe: width=”500″ height”405″ – das müsst ihr aber nicht machen. Gefällt mir einfach besser wenn das Video die volle Breite ausnutzt. Die beste Qualität erreicht ihr übrigens, wenn ihr die Breite auf 480 einstellt, da die Codierungsoptionen bei den High-Quality-Videos auf 480er Breite eingestellt sind.

Viel Spaß beim ausprobieren und beim Einbinden von hochqualitativen Videos von YouTube auf eurer Internetseite. Wenn euch dieses Tutorial gefallen hat, würde ich mich über einen kleinen Backlink bzw. Bericht von euch natürlich sehr freuen.

Update: Leider funktioniert das Prinzip aktuell nicht mehr. Ich schaue, ob man mit einer anderen Methode weiterkommt.

Update 2: Nur ein kleiner Fehler im Script. Geht immer noch ;-)


Verwandte Artikel:

Wie hat dir der Beitrag gefallen?
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Bislang noch nicht bewertet)
Loading ... Loading ...
Von :: 2008-10-21

Der Beitrag wurde am Dienstag, den 21. Oktober 2008 um 11:12 Uhr veröffentlicht. Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen.
Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.



15 Reaktionen

  1. niuus.com

    Tutorial: YouTube-Videos in Blogs mit hoher Qualität einbinden und abspielen…

    Obgleich YouTube schon seit einiger Zeit die Möglichkeit bietet, bei entsprechend gutem Ausgangsmaterial Videos auch mit hoher Qualität zu betrachten, so gilt dies offiziell nur, wenn das Video auch auf der YouTube-Webseite betrachtet wird. Der Haupt…

  2. hype.yeebase.com

    Tutorial: YouTube-Videos in Blogs mit hoher Qualität einbinden und abspielen…

    Obgleich YouTube schon seit einiger Zeit die Möglichkeit bietet, bei entsprechend gutem Ausgangsmaterial Videos auch mit hoher Qualität zu betrachten, so gilt dies offiziell nur, wenn das Video auch auf der YouTube-Webseite betrachtet wird. Der Haupt…

  3. Abalone

    Das Plugin “Smart Youtube” für Wordpress erleichtert dir die Arbeit – beschrieben ist es hier: http://wordpress.org/extend/plugins/smart-youtube/installation/ :)

  4. syx

    Jaja ich weiß, wer Rechtschreibfehler findet, darf sie behalten… Aber ein ct-Gastredakteur müsste doch eigentlich schon wissen, dass man Standar*d* mit d schreibt, oder? :)

    *schonwiederweg*

  5. Alper Iseri

    Es gibt so ein paar Wörter, bei denen stolpere ich immer wieder drüber. Standard ist so ein Wort aber es gibt noch einige andere Begriffe, die ich immer wieder falsch schreibe.

    Bei Artikeln oder anderen schriftlichen Dokumenten habe ich ja zum Glück eine Rechtschreibkorrektur. Hier beim Blog schreibe ich zumeist “frei nach Schnauze” – also vergib mir bitte meine Nachlässigkeit :-))

    PS: Fehler sind übrigens korrigiert ;-)

  6. Gretus

    Hallo,

    schöner Beitrag, gefällt mir gut ;-)

    Grüße

    Gretus

  7. Torsten Möller

    Hier noch eine technische Anmerkung: Wenn man Videos von YouTube so einbettet, dass ähnliche Videos nach der Vorführung nicht angezeigt werden sollen, dann wird hinter dem Code-Schnipsel “&fs=1″ noch ein “&rel=0″ angefügt. Wenn auch hier eine HQ-Einbettung einwandfrei funktionieren soll, muss die Passage unbedingt zwischen diesen beiden Schnipsel eingefügt werden – nicht dahinter!

    Also so: “http://www.youtube.com/v/M-LZ7yH-JBM&hl=de&fs=1&ap=%2526fmt%3D18&rel=0″. Als ich bei besagtem Video die Passage zunächst hinter “&rel=0″ angefügt hatte, führte dies zu der Fehldarstellung, dass gleich während des Abspielens der Replay-Button mitten im Bild eingeblendet wurde.

  8. Hans

    funktioniert bei dem video irgendwie nicht:
    http://www.youtube.com/watch?v=P5_Msrdg3Hk

    Bei dem code:

    kommt dann “video noch available”…

  9. Torsten

    @ Hans: Nicht alle Videos (vor allem Ältere) auf YouTube gibt es auch in einer High-Definition-Version. Deshalb erscheint dann “Video not available”, d.h. es gibt das Video nicht im HD-Format. Manchmal kann es natürlich auch sein, dass ein Video generell gesperrt wurde. Das hat dann gar nix mit dem Codeschnipsel zu tun, sondern niemand kann es mehr sehen, obwohl es noch als Video aufgeführt wird.

  10. Schäfer Gümbel Spitzenkandidat | MINDTIME The Online Show mit Rob Vegas

    [...] Das Schäferlied ( Schäfer Gümbel Song )in hoher Qualität ! Anleitung gibts hier! [...]

  11. Youtube mit High Quality (Update: 720p) « Manjel’s Blog

    [...] gelinkten Videos sind trotz Code-Veränderung nicht High Quality. Das Tutorial von Meetinx.de funktioniert leider nicht mehr. Das sieht man auch an den beiden Beispielvideos von meetinx, welche [...]

  12. Kajabo

    Hallo, ich hätte eine Frage:

    Ich möchte ein Youtube Video in HQ auf einem Profil in einer social community einbinden.

    Grundsätzlich ist das möglich. Man fügt einfach [youtube]…(url des youtube videos]…[/youtube] in die Profilbeschreibung ein und schon erscheint das eingebettete Youtube Video.

    Nur leider nicht in HQ! Habe es schon mit &fmt=18 aber Qualität bleibt bei eingebettetem Video gleich schlecht. Es sei den man klickt auf den Button “Video in HQ ansehen”.

    Ich möchte aber, das alle die es auf meinem Profil anklicken, auch in HQ zu sehen.

    Wie sieht es dort mit den Möglichkeiten aus?

    Gruß, Kajabo

  13. Alper Iseri

    @Kajabo: Da musst du den Betreiber der Community ansprechen. Das es dort nicht funktioniert, liegt nicht an YouTube sondern wohl an der Art, wie Videos dort eingebunden werden. Sprich die Betreiber einfach mal an :-)

  14. UsualRedAnt

    Ola!

    Mein Code für das Einbinden von Youtube-Videos sieht etwas anders aus.

    Zunächst empfehle ich das Embed-Element zu streichen. Das ist “veraltet” (ergo nicht XTHML-Strict-valide) und unnötig, weil die Werte auch dufte direkt in das einleitende Object-Element passen.
    Aus der Source (src) wird einfach eine Datenquelle (data). Den Typ (type) kannste genau so übernehmen wie er im embed steht.

    Als nächstes schenke ich mir die mehrfache Übergabe der Parameter am Ende der URL. Logisch richtig übergeben wir die als das, was sie sind – eben Parameter (param).

    Die Wiedergabe “hochauflösender” Videos regel ich über den Parameter “hd=1″. Das hat den Vorteil, dass, wenn kein HD-Video vorhanden ist, automatisch die Standardqualität wiedergegeben wird.

    Am Ende ist das ganze nicht nur XHTML-strict, sondern auch noch kürzer (weniger Zeichen) als Deine Lösung. Magste mal ausprobieren und mir sagen, was Du davon hälst?

    Ich hoffe, dass klappt jetzt:

    <object width=”500″ height=”405″ type=”application/x-shockwave-flash” data=”http://www.youtube.com/v/R5VwzQhPZsg”>
    <param name=”movie” value=”http://www.youtube.com/v/R5VwzQhPZsg” />
    <param name=”allowfullscreen” value=”true” />
    <param name=”flashvars” value=”showsearch=0&fs=1&hd=1″ />
    </object>

    Mit hanfigen Grüßen
    Steffen

  15. Paul

    Gibt es dafür eigentlich kein WP-PlugIn?
    Ich meine eine Erweiterung die nur den direkten Link benötigt und immer das beste aus den Videos rausholt.

Nach oben



Einen Kommentar schreiben

Bitte benutzt nur eure Namen oder Nicknamen. Einträge mit rein werblichem Hintergrund (meist gekennzeichnet durch die Verwendung von Keywords, Deeplinks oder Links in Beiträgen) werden ggf. in Rechnung gestellt. Informationen darüber findet ihr hier. Bitte beachtet die Datenschutzhinweise.


 

Informationen

Du befindest dich auf dem Haupt-Bereich von meetinx. Hier findest du passende Anzeigen zu dem Beitrag:



Werbepause



Hilfsprojekt

Ich unterstütze mit einem Teil meiner Einnahmen die folgenden Organisationen:

Ärzte ohne Grenzen

AiZAN für Mädchen

Im Jahr 2009 habe ich 2700 Euro gespendet. mehr...

Kommentare





RSS Feed Immer auf dem Laufenden?
Abonniere den RSS-Feed.

meetinx ist ein Blog von Alper Iseri. Ich bin Autor, Kommunikationsberater und Unternehmer. Auf dieser Seite befasse ich mich mit dem Besten aus Werbung, Web und Marketing. Ich lebe und arbeite in der Stadt Hamburg. mehr...

Alper Iseri

"Andy macht Werbung für die Congstar Combiflat - http://tinyurl.com/y9pyd9n" Live via Twitter Twitter


Networking

Interesse geweckt? Dann nutze doch einen der nachfolgenden Dienste:

XINGSpacerMy twitter profile


Tag Cloud



Publikationsarchiv



Februar 2010
Mo Di Mi Do Fr Sa So
« Jan    
1234567
891011121314
15161718192021
22232425262728


MX Übersetzer