Mittwoch, 9. Dezember 2009

Blog-Tricks: YouTube-Videos in der richtigen Blogbreite einbetten

Da ich beim Bloghoppen schon öfters auf das Problem gestoßen bin, dass eingebettete YouTube-Videos zu breit sind und so den übrigen Blogtext verdecken, möchte ich euch heute mal eine einfach nachzuvollziehende Anleitung zur Lösung geben! :-)

Tipps und Tricks: YouTube-Videos in den Blog einbetten und an die richtige Größe anpassen

Als Beispiel nehme ich den bekannten witzigen TV-Werbespot mit den rollschuhlaufenden Babies (siehe letztes Fundstück der Woche). Das YouTube-Video heißt "Evian Babies" und ihr findet es unter der folgenden URL: http://www.youtube.com/watch?v=v2oi_vT0sF0 . Ruft das Video zunächst erstmal auf.

Im Bereich rechts vom Video findet ihr die "URL", also die Webadresse, unter der das Video zu finden ist, sowie die Zeile "Einbetten":






Dort steht der HTML-Quelltext für das Video, beginnend mit object height= 340 width= 560, einigen weiteren Parametern und endend mit height= 340 width= 560. Wenn ihr das Video in euren Blog einbauen wollt, müsst ihr genau diesen Quelltext in euren Blog hineinkopieren. Das Video besitzt dann die Größe 560 x 340 (B x H) und müsste so aussehen:


Wie ihr seht, ist das Video etwas zu breit für meinen Blog. Das lässt sich aber sehr leicht anpassen. Dazu habt ihr zwei Varianten:

  • Entweder ihr nehmt eine der vorgebenen  Möglichkeiten bei "Anpassen", was ihr auf YouTube rechts neben dem Bereich "Einbetten" findet. Dazu habt ihr die Wahl zwischen den Größen 480 x 295, 560 x 340, 640 x 385 und 853 x 505. Klickt dazu einfach den Rahmen mit der passenden Größe an und kopiert den automatisch geänderten Quelltext in euren Blog. Ich nehme jetzt mal das Beispiel 480 x 295, was bei mir so aussieht - es ist also immer noch zu groß:

    • Oder ihr kennt im Idealfall die Breite eures Blogs genau (steht im Blog-Quellcode) und passt die Videogröße manuell an. Dazu kopiert ihr euch wieder den Quelltext - mit welcher Videogröße ist egal - und integriert ihn in euren Blog. Jetzt müsst ihr lediglich noch die Zahlenwerte im Quelltext ändern. Bei mir ist die optimale Größe z.B. 425 x 344. Der Quelltext muss also in object height= 344 width= 425 [...] width= 425 height= 344 geändert werden. So sieht das Video dann aus:




    Ist doch gar nicht so schwer, oder? :-) Ich hoffe ich konnte dem einen oder anderen Blogbesitzer unter euch helfen.

     

    Kommentare:

    1. und wie kann man das video weglassen und nur die leiste einbetten? habe das schon oft gesehen..

      AntwortenLöschen
    2. Dazu musst du eben nur die Bloghöhe so minimieren, dass man nur noch die untere Leiste sieht. Probiere z.B. mal height="25".

      AntwortenLöschen
    3. Danke für eine Hilfe!
      Schicker Blog :)

      http://fashion-with-heart.blogspot.com/

      AntwortenLöschen
    4. Vielen, vielen lieben Dank Kathrin. :) Dieser Post war wirklich extrem hilfreich für mich, ich das schon so oft auf Blogs gesehen, aber wusste nie, wie ich das machen soll und hab's nicht hingekriegt, vielen Dank nochmal. :)

      AntwortenLöschen
    5. Hallo Sarah, super, dass dir mein Post weitergeholfen hat! :D

      AntwortenLöschen
    6. hallo. :)
      also ich hab mal auf einem Blog gesehen, dass
      man bloß in der mitte so ein "play-zeichen"
      gesehen hat, also man konnte nichts anderes machen, nur auf play drücken, weißt du vielleicht zufällig, wie ich das machen kann ? :))

      AntwortenLöschen
    7. Hallo Nobody, dazu musst du einfach die Höhe des Videos soweit reduzieren, bis man nur noch den "Play"-Balken unten sieht! Einfach mal ausprobieren :)

      AntwortenLöschen

    Ich freue mich immer über eure Kommentare :-)

    ...und erspare euch die nervige Spambot-Abfrage, indem ich jede Anfrage manuell freischalte. Ach und noch etwas: Kommentare mit Werbelinks und Verstößen gegen die Netikette behalte ich mir vor kommentarlos zu löschen.

    Related Posts with Thumbnails