So optimierst du deine Blog-Videos für die mobile Ansicht

Seit Kurzem bin auch ich endlich im Smartphone-Zeitalter angekommen. Mein altes, liebgewonnenes Handy hat nach Jahren treuer Dienste endgültig seinen Geist aufgegeben.

Natürlich habe ich sofort gecheckt wie mein Blog in der mobilen Ansicht aussieht.

Alles sah prima aus, bis ich entdeckte das meine Videos auf dem Smartphone nicht richtig angezeigt werden. Dabei dachte ich immer Blogger würde alle meine Artikel automatisch für mobile Ansichten optimieren. Stimmt auch, was Text und Bilder betrifft nur bei den Videos klappt das anscheinend nicht.

Ich habe das mal fotografiert. Hier links siehst du es ganz deutlich: der Text (oben im Bild) wird gut umgesetzt und an den Handy-Bildschirm angepasst, doch das Video ist viel zu groß und wird rechts abgeschnitten.

Um das Video anzusehen muss man das Handy drehen, aber auch dann passt der Videoplayer immer noch nicht ganz ins Display.

Herrjeh, an was man als Bloggerin alles denken muss.

Zum Glück kenne  ich durch Youtube ein toller Trainer aus der US den ich fragen konnte. 

Er hat mir prompt geantwortet und mir diesen Link geschickt: http://embedresponsively.com/

Die Internetseite die sich dahinter verbirgt, hilft dir deinen ganz normalen YouTube-Video-Link um zu formatieren. Danach werden deine Videos sowohl auf dem Desktop als auf dem Smartphone immer in der optimalen Größe angezeigt.

Aaaaaarrrg, du hast gerade keine Ahnung wovon ich spreche??!

Kein Problem, ich bereite schon ein Video vor, in dem ich Schritt für Schritt zeige wie du ein YouTube-Video in deinen Blog einbinden kannst. Wenn du also mit diesem Artikel nicht klar kommst, dann warte noch ein bisschen bis mein Video fertig ist und dann lies den Artikel nochmal. Du wirst sehen, dann ist es gar nicht mehr so kompliziert wie es sich gerade anhört.



Für die Blogger-Profis unter meinen Lesern, geht es nun aber flott weiter mit der Anleitung.

Schritt 1

Gehe zu deinem YouTube Kanal, öffne das Video das du in deinen Blog einbetten willst und kopiere den Link deines Videos (rechte Maustaste "kopieren").




Wichtig:

Achte darauf dass du kein Häkchen bei "Playlist teilen" gemacht hast, denn das funktioniert nicht. Du kannst mit diesem Tipp nur ein Video formatieren, aber keine Playlists.



Schritt 2 

Klicke auf diesen Link, er leitet dich zur Seite von embedresponsively.com. Dort kannst du deinen Videolink kostenlos umformatieren lassen, so dass er künftig auch für mobile Ansichten optimal funktioniert.

Wenn du auf den o.g. Link klickst öffnest sich folgendes Fenster:

Schritt 3

Ersetze den grau markierten Beispiel-Link einfach durch deinen eigenen Link. (rechte Maustaste "einfügen"). Einfach den Anweisungen im Bild folgen:


Jetzt hast du einen HTML-Code kopiert, den du nur noch in deinen Blog einbinden musst.

Schritt 4

Öffne den Blogpost, in den du das Video einbetten willst.Achte dabei darauf, dass du die HTML-Ansicht aktiviert hast.  Füge den kopierten HTML-Code nun an die gewünschte Position in deinem Video ein.
(Wenn du nicht weißt wie das geht, dann schau mein Video "Blogger-Kurs Teil 1" an, dort erkläre ich ca. bei Position 09:42 wie du zur HTML-Ansicht wechseln kannst)



Leider zeigt sich der fertige Code erst in deinem Blog, wenn du den Post veröffentlichst und nicht schon in der Vorschau. Das ist ein bisschen lästig, aber ich hab noch keinen anderen (besseren) Weg gefunden.

Zusatz-Tipp:

Ich schreibe den ganzen Blogartikel fertig und füge meine YouTube-Videos ein, so wie immer. Erst wenn alles passt, ersetze ich den alten Code durch den neu formatierten HTML-Code. So weiß ich, dass alles vom Layout ist wie ich es haben möchte.



Hier noch ein Foto, von dem überarbeiteten Blogartikel in der Smartphone-Ansicht:


Ich hoffe du kannst diesen Tipp gut gebrauchen und würde mich sehr freuen, wenn du meinen Artikel mit deinen Freunden teilst, damit auch sie davon profitieren können.

Schreibe mir doch deine Meinungen zu diesem Tipp hier unten in die Kommentare.

Vielen Dank und liebe Grüße

deine Mimi






Kommentare:

  1. Liebe Mimi,
    danke für den super Tip. Ich hatte mich schon gefragt wofür dieser extra Code bei Youtube angezeigt wird, wenn ich das Video in den Blog teile. Prompte Antwort in Deinem Artikel :-)
    Ich freu mich schon auf Dein Video zum Artikel.

    Liebe Grüße
    Tini

    AntwortenLöschen
    Antworten
    1. Guten Morgen Tini,
      prima, ich freu mich, dass mein Tipp genau zur rechten Zeit kam.
      Liebe Grüße deine Mimi

      Löschen