Eingebettete YouTube- und Vimeo-Videos für mobile Geräte optimieren

Beim Einbetten von Videos auf deiner Webseite oder deinem Blog solltest du darauf achten, dass die Videos auch auf mobilen Geräten wie Tablet-PCs oder Smartphones abgespielt werden können. Apple unterstützt beispielsweise keine Flash-Videos, bei Vimeo muss man eine extra mobile Version der hoch geladenen Videos erstellen und bei einer Webseite, die mit CSS3 Media Queries optimiert ist, sollten sich die Videos automatisch an die jeweilige Bildschirmgröße anpassen. Damit deine eingebetteten Videos auf mölichst verschiedenen Geräten angeschaut werden können, habe ich einige hilfreiche Tipps zusammen gestellt.

Embed-Code mit iframe statt object

Seit einiger Zeit verwenden Youtube und Vimeo den HTML-tag iframe zum Einbetten von Videos auf anderen Webseiten und nicht mehr den alten Embed-Code mit <object> und <embed>.

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/3jd-rAm5Xvc" frameborder="0" allowfullscreen></iframe>
<object width="480" height="390"><param name="movie" value="http://www.youtube.com/v/3jd-rAm5Xvc?fs=1&amp;hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/3jd-rAm5Xvc?fs=1&amp;hl=de_DE" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="390"></embed></object>

(Vergleich des neuen und alten Embed-Code des gleichen Videos.)

So wird der Einbetten-Code von Videos endlich W3C-valide und der YouTube HTML5-Player kann in HTML5-fähigen Browsern zum Einsatz kommen.

Mehr Infos über den HTML5-Player von YouTube findest du auch auf der YouTube-Webseite.

Da Apple ja den Adobe Flash-Player nicht unterstützt und daher Videos mit dem alten Embed-Code nicht angezeigt werden können, ist der neue Code mit Hilfe von iframe auch für iPhones und iPads optimiert.

Mobile Video-Version bei Vimeo

Bei Vimeo wird auch der iframe-Code als Standard verwendet. Um die Videos aber auch auf mobile Geräte abspielen zu können benötigst du die Plus-Version von Vimeo. Dann kannst du die Plusmember-Option “yes, make my videos mobile-ready” unter “Me / Settings / Preferences / Make mobile versions of videos” auswählen, wenn du in deinem Vimeo-Account angemeldet bist.

Videos einbetten

Ohne diese Option wird auf einem mobilen Gerät die Nachricht angezeigt, dass für das Video leider keine mobile Version zur Verfügung steht.

Damit deine Vimeo-Videos auch auf dem Firefox-Browser und im Internet Explorer funktionieren, sollte auf jeden Fall der Flash-Player installiert sein. Ansonsten kann es sein, dass Vimeo-Videos z.B. auf Firefox 4 nicht laufen.

Videos einbetten bei CSS3 Media Queries

Wenn deine Webseite oder dein Blog mit CSS3 Media Queries für verschiedene Bildschirmgrößen optimiert ist, benötigst du in deinem CSS-Code außerdem die Eigenschaft max-width: 100%; für iframe. Z.B.:

.post iframe {
        max-width: 100%;
}

Ansonsten werden deine über iframe eingebetteten Videos nicht automatisch auf die richtige Browser-Größe mit skaliert und es kann sein, dass dein Video am rechten Bildrand abgeschnitten wird.

Videos einbetten
Video-Player passt sich nicht automatisch an die Layout-Breite an, wenn iframe max-width nicht mit 100% definiert ist.

Den iframe-Code in WordPress nutzen

Um YouTube oder Vimeo-Videos gleichzeitig über den WYSIWYG-Editor und den HTML-Editor im WordPress-Admin einbetten und bearbeiten zu können (und nicht nur über einen der beiden Editor), kannst du z.B. das WordPress-Plugin “PageView” installieren.

Videos einbetten

Mit Hilfe des Plugins kannst du dann den Shortcodes “pageview” in folgender Form nutzen:

[pageview url="http://player.vimeo.com/video/22082981 " width=“610px“ height="343px"]

Möchtest du lieber kein zusätzliches Plugin verwenden musst du auf jeden Fall darauf achten, nicht zwischen dem WYSIWYG-Editor und dem HTML-Editor hin und her zu wechseln, während du den Artikel schreibst oder bearbeitest. Ansonsten wird dein eingebetteter iframe-Code leider aus dem Artikel gelöscht.

Hast du noch weitere Empfehlungen und Tipps zum Einbetten von YouTube- oder Vimeo-Videos? Wie sind deine Erfahrungen bei der Optimierung von eingebetteten Videos für mobile Geräte? Über deine Erfahrungen und Tipps freue ich mich sehr!

20 Kommentare

  1. Wird ein Youtube-Video denn nicht auch als iFrame angezeigt, wenn ich in WordPress einfach den Link dorthin z.b. in den WYSIWYG-Editor schreibe? Oder findet hier nur das alte Verfahren statt?

    • @Matthias, @Paul:

      Vielen Dank für die Kommentare :-)

      @Matthias:
      Der iframe-Code funktioniert eignetlich schon, nur beim Wechsel zwischen dem HTML- zum WYSIWYG-Editor verschwindet der Video Embed-Code einfach (habe leider noch nicht herausgefunden, warum eigentlich), daher die Alternative mit dem Shortcode und dem Plugin :-)

      Viele Grüße,
      Ellen

  2. Durch den gezeigten CSS3 Code habe ich soeben meinem Blog gesagt wie breit alle Videos maximal sein dürfen.

    Musste das Ganze zwar etwas abwandeln, klar bei eigenem Design, aber dadurch muss ich beim einbetten jetzt auch nicht mehr darauf achten ob das iFrame-Schnipselchen im Video anzeigt das es breiter als X ist. Dadurch habe eine weitere Sorge weniger.

    …merci nochmals.

  3. Da ich weiß, dass auf vielen mobilen Geräten kein Flash aber eine YouTube-App vorhanden ist, empfiehlt es sich, den Videolink unter das Video zu packen. Ich nutze nur Videos von YouTube und Vimeo, habe aus diesem Grund selbst Hand angelegt und einen entsprechenden Shortcode in der functions.php erstellen.

    Da es evtl hilfreich sein könnte, hier mal meine Anleitung: http://renehesse.de/wordpress/video-mit-shortcode-ohne-plugin-in-wordpress-einbinden/

    Falls ihr Videos per iFrame einbindet und eine Lightbox nutzt, könnte auch dies für euch hilfreich sein:
    http://renehesse.de/web/youtube-lightbox-und-iframe-code/

    Grüße René

  4. Danke für den Artikel. Dieser kommt genau 3 Tage zu spät, nachdem ich fluchend wie ein Rohrspatz es dann doch irgendwie geschafft habe.
    Und das nur, weil ich zwischen HTML und WYSIWYG-Editor rumgeschalten haben
    Mäh.
    Gut, dass ich nun weiß wie es geht :-)

    Mella

  5. @Eva, @Paul,

    toll, dass euch der Artikel weiterhelfen konnte :-)

    @Mella,

    oh je, dass tut mir leid. Ich kenne das Problem auch und konnte mir auch nicht erklären, wieso mein eingebettetes Video auf einmal verschwunden war…ich hoffe in Zukunft klappt es besser :-)

    @René,
    vielen Dank für deine weiteren Link-Tipps, deine Beschreibungen sind wirklich super hilfreich. Danke dafür :-) Und einen zusätzlichen Link zur Videoseite mit anzubieten ist auf jeden Fall sinnvoll. Ich werde mein letzten Video-Post da auch gleich mal nachbessern…

    Viele Grüße,
    Ellen

    • Hallo,
      ich komme überhaupt nicht weiter…
      am Browser funktioniert alles, nur auf meiner mobilen Seite geht es nicht.
      Was muss ich den einfügen damit mein video auch auf meiner mobilen Seite zu sehen ist.

      Vielen dank im voraus…

  6. Ich muss mich wieder bedanken. Schon irgendwie komisch, dass ich per Google immer hier lande.
    Beim nächsten Problem benutze ich am besten gleich die Blogsuche hier. :D

  7. Danke für den tollen Beitrag. Habe es gleich mal getestet. Auf dem Rechner im Firefox klappt es super wenn man das Browserfenster verkleinert. Nur auf meinem HTC mit Android liegt das Video über allem drüber und verkleinert sich nicht automatisch. Habe die Variante ohne Plugin mit iframe genommen!

  8. Etwas Falsch.

    iFrame-Tags gibt es nicht nur seit HTML5. Auch vorher konnten/wurden derartig YT-Videos eingebunden, des hat nichts mit HTML5 zu tun.

    Hinter dem Frame (bzw. “inline Frame”) steckt nichts anderes als ein Script auf der Offiziellen YT-Seite, was dann überprüft, ob HTML5 zur verfügung steht, bzw. was für Video-Formate abgespielt werden können (video-Tag,…). Dabei wird dann über Javascript der jeweilige Player ausgegeben. Unterstützt der Browser beispielsweise Flash, so wird auch hinter dem iFrame der Flashplayer ausgegeben, ansonsten bedient sich des Script an HTML5 (sofern verfügbar).

    Ich verstehe also nicht, was daran bei vielen “HTML5” ist. Es ist jediglich ein Frame, der auch zu HTML4-Zeiten existierte!

  9. Zusatz:
    Auch der Satz “Jetzt wird das einbinden endlich W3 Konform[…]” ist nicht gerade richtig.

    Wer sich damit auskennt, kann auch die Object-/Embed-Tags richtig und W3-Konform einbinden. Die Seite hinter dem iFrame hingegen ist auch nicht valide!

    Aber wer hält sich schon an die validität – Gut, ich mach es aufjedenfall, nicht nur alleine wegen der Browserkompatiblität. Nichtmals Google hält sich dran, selbst nicht die Browserhersteller wie man sieht, wenn es schon Browserspezifische Tags/Attribute existieren.

  10. Ich weiß das Thema ist veraltet. Dennoch ich muss echt sagen Klasse Erläuterung. Bin aus Zufall hier gelandet. Mach bitte weiter so finde es toll was hier gemacht wird.
    LG. Andy vom Fotografie.Hux.de Team.

  11. Danke für den Artikel. Nur was ist denn zu bevorzugen? Man findet beides oft. Vimeo sehe ich immer öfter aber ich denke youtube ist doch in den meisten Fällen besser geeignet, oder?
    Gruß Andreas

  12. Hallo,
    ich komme überhaupt nicht weiter…
    am Browser funktioniert alles, nur auf meiner mobilen Seite geht es nicht.
    Was muss ich den einfügen damit mein video auch auf meiner mobilen Seite zu sehen ist.

    Vielen dank im voraus…

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *