YouTube Videos responsive einbinden

Zuletzt geändert:

Kommentare: 78 Kommentare

Pinterest Hidden Image

YouTube Videos datenschutzkonform UND responsiv einbinden – in diesem Artikel erkläre ich Dir, wie es geht. Funktioniert auch mit anderen Videohostern wie Vimeo oder Dailymotion.

In einem meiner letzten Artikel hatte ich ja beschrieben, welche Möglichkeiten Du hast, YouTube Videos datenschutzkonform einzubetten.

Ich nutze derzeit auf fast allen meinen Seiten die Variante 1, den iframe mit der No-Cookie-Option. Ein Nachteil der iframes ist es gegenüber den WordPress Embeds, dass die Videos nicht automatisch responsive angezeigt werden:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Mit einem einfachen HTML & CSS Code kannst Du hier aber Abhilfe schaffen.

Füge in Deine style.css folgenden Code ein:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Der Wert unter padding-bottom: 56.25% steht übrigens für die Aspect Ratio von 16:9 -> 9/16*100 =56,25%

In Deinen Blogpost fügst Du um den iframe-Code Deines YouTube Videos einen div-Container ein. Benutze dazu den Text-Editor-Modus von WordPress bzw. den HTML Block im Gutenberg Editor.

<div class="video-container"><iframe src="https://www.youtube-nocookie.com/embed/LJUaJ5PSXGE?rel=0"  frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Und so siehts dann responsiv aus:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Damit werden die Videos responsive automatisch in voller Breite angezeigt. Falls Du das nicht möchtest, baust Du um das erste DIV einfach noch ein Wrapper DIV ein und legst dort die Breite fest.

In die CSS kommt dann zusätzlich noch dieser Code:

.video-container-wrapper {
max-width: 100%;
width: 600px;
left: 0;
right:0;
margin:auto;
}

Und der HTML Code sieht dann so aus:

<div class="video-container-wrapper"><div class="video-container"><iframe src="https://www.youtube-nocookie.com/embed/LJUaJ5PSXGE?rel=0" width="300" height="150" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>

Und so siehts dann auf der Seite aus:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Dabei wird das Video gleichzeitig noch zentriert dargestellt. Den Wert in width kannst Du entsprechend anpassen.

Der Code funktioniert auch für andere Videohoster wie Vimeo oder Dailymotion.

YouTube Videos responsive einbinden
Auf dem Laufenden bleiben

Trag Dich jetzt in meinen Newsletter ein und erhalte News, Tipps, Extra Content und Angebote zum Thema SEO, Content Marketing, WordPress und Online Business Aufbau!

Invalid email address
Ich versende meinen Newsletter 2-4 Mal im Monat. In jedem Newsletter hast Du die Möglichkeit, Dich wieder auszutragen. Deine Anmeldedaten, der Versand und statistische Auswertungen werden über ActiveCampaign in den USA verarbeitet. Hier findest du weitere Informationen zum Datenschutz.

78 Gedanken zu „YouTube Videos responsive einbinden“

  3. Mega! Danke Dir! Du hast mir ganz viel Zeit gespart. Funktioniert klasse und ich konnte es für die unterschiedlichen Aspect-Ratios meiner Videos & Images easy adaptieren. Super erklärt! Und tolle Seite, die sofort in meinen Favorites gelandet ist.

    Antworten

  5. Macht man das jetzt nicht besser mit
    aspect-ratio: 16 / 9;

    Wenn ja, würde ich eine Ergänzung des Artikels begrüßen

    Ich wünsche Ihnen ein gutes und schönes Jahr 2023

    Antworten

  9. Hallo Martina,

    ich entwickle im crm joomla die Webseite der-ortenauer.de. Bei joomla extensions habe ich lange nach einer Lösung gesucht – ohne befriedigenden Erfolg. Da ich selbst seit 30 Jahren programmiere dachte ich, dann mache ich das mit CSS. Allerdings bin ich auch ein wenig faul und niemand, der das Rad neu erfinden will.

    Somit habe ich zuerst recherchiert und Deine Lösung gefunden. Vielen lieben Dank – einfach nur – wenn man das politische korrekt überhaupt noch sagen darf – einfach nur geil.

    Ganz liebe Grüße aus der Ortenau

    Michael

    Antworten

  11. Hallo,
    Danke für Deinen Beitrag, funktioniert super!
    Nur wird das Video centriert angezeigt, ich möchte es gerne linksbündig haben. Wie muss hier der Code lauten?

    Antworten

  12. Hallo,
    vielen Dank für den Beitrag. Leider kann ich bei mir nicht so einfach Sachen in die CSS einbinden.
    Kannst du mir einen Code erstellen, bei dem die CSS in der HTML steht? Ginge das?
    Vielen Dank!

    Antworten

    • Hallo,

      Wenn Du WordPress nutzt, kannst Du den Code auch einfach über den Customizer -> Zusätzliches CSS eingeben und brauchst die style.css dazu nicht anzufassen. Wenn Du es im HTML machen möchtest (was ich Dir hier nicht raten würde, da Du ja spätestens an das HTML des YouTube iframes nicht rankommst), dann würdest Du statt div class=“video-container“ … div style=“position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;“ eingeben.
      Versuch es einfach mal über den Customizer, das ist einfacher und gilt dann auch für alle Videos – Inline CSS gilt nur für das jeweilige Element.

      LG Martina

      Antworten

          • Hallo Martina,
            vielen Dank für deine schnellen Antworten.
            Ich suchte „einfach“ nach einem allgemeinen Code. Jetzt ist es das Shopware System. Früher war es auch schon ein Gambio, Wordpress, Magento oder …
            Mir geht es um einen Code, bei dem die CSS schon integriert ist. Sicher gibt es für jedes System eine Lösung. Ich suchte nach einer Lösung für alle Systeme. Die scheint es ja nicht zu geben. Schade
            Ich benötige nun keine Lösung für Shopware. Ich weiß auch um Plugin Möglichkeiten und mehr.
            Vielen Dank für die Informationen und dir alles Gute!
            Lieben Gruß
            Keno

          • Hallo Keno,

            was Du hier brauchst, ist entweder Zugriff auf die CSS (External CSS), auf den Header (Internal CSS) (dann kannst Du den hier vorgestellten Code genauso wie er ist in den Header in den Tag einbauen) oder Zugriff auf ein für das jeweilige System passendes Plugin/Tool (in WordPress geht das über den Customizer). Diese Tools machen in der Regel nichts anderes, als den Code in die style Tags in den Header einzubauen. Hier nochmal ein Überblick über die Möglichkeiten, CSS einzubauen: https://www.w3schools.com/css/css_howto.asp
            Inline CSS ist bei dieser Anwendung etwas schwierig, da man den Style immer auf ein bestimmtes Element anwendet. Du müsstest es also bei jedem Vorkommen einbauen, brauchst aber kein Zugriff auf CSS oder Header. Das würde dann ggf. so aussehen:
            <div style=“position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;“><iframe src=“https://www.youtube-nocookie.com/embed/LJUaJ5PSXGE?rel=0″ frameborder=“0″ allowfullscreen=“allowfullscreen“ style=“position: absolute; top: 0; left: 0; width: 100%; height: 100%;></iframe></div>

            LG Martina

  14. Liebe Martina,
    großartiger Artikel – habe genau so eine Lösung benötigt und die hat mir viel Zeit und fummelei erspart.

    vielen, vielen Dank für deine Arbeit von der ich profitieren konnte und ich wünsche Dir ein sehr schönes Wochende und – auch wenn wir uns nicht kennen – bleib gesund und erfolgreich

    Thomas Rudolf Hansel

    Antworten

  17. Hallo Martina,

    also bei mir bleibt ein schwarzer Rahmen (=nicht voll responsive) bei kleineren Bildschirmgrößen. Liegt das an Borlabs Cookies? Die haben ja nur bestimmte Formate für ein Vorschaubild…
    Danke
    Jan

    Antworten

    • Hallo Jan,

      nimm beim Video Container mal das padding-top raus und setze es auf 0. Ich habe den Code nun entsprechend angepasst hier auf der Seite. Dieser Code funktioniert für Videos im 16:9 Format. Sollten die Videos in einem anderen Format sein, z.B. 4:3, müsstest Du die Ratio entsprechend anpassen, also dann statt 56.25% 75%.

      LG Martina

      Antworten

      • Hallo Martina,
        danke für Deine Antwort. Leider unverändert. Ich habe die div class html5 videocontainer im Auge, die scheint die betreffenden Größen zu definieren, habe aber von CSS wenig Ahnung…
        Noch ´ne Idee?
        LG Jan

        Antworten

        • Hauptsache es funktioniert 🙂 Wenn Du den Teilen-Link in Verbindung mit einem Plugin wie Borlabs Cookie oder Video Lyte verwendest, gibts da auch keine Probleme mehr mit dem Datenschutz, so dass Du die iframe-Lösung dann auch nicht unbedingt mehr brauchst. LG Martina

          Antworten

  18. Hey Martina,

    ich hatte vorher als Übergangslösung einen customizable HTML5 Player eingebaut (plyr.js), jedoch hat mir der dann doch irgendwie nicht mehr zugesagt und ich habe mich entschlossen wieder YouTube Videos per IFrame einzubinden ;).

    Deine Anleitung hat super einfach und schnell funktioniert – danke dafür!

    LG
    Silas

    Antworten

  20. Hi Martina

    Vielen Dank für die detailierte Schritt-für-Schritt Anleitung. Nach langem hin und her probieren bin ich auf deine Seite gestossen und konnte das „Problem“ endlich lösen. Die Umsetzung hat einwandfrei funktioniert.

    Beste Grüsse
    Phil

    Antworten

  23. Danke sehr hilfreich und hat gleich geklappt.

    Für Jimdo-Nutzer:
    Bei Jimdo muss man auf Head bearbeiten gehen und dann den CSS Code einfügen. Dazu den Style css code von oben zwischen dem Code und einfügen.

    Auf der Website dann ein HTML-Widget einfügen und den HTML-Code reinkopieren. Fertig 🙂

    Antworten

  26. Hallo Martina,

    vielen Dank für das Tutorial. Bin schon mal sehr froh, dass die Videos mobil jetzt angepasst sind. 🙂 Allerdings habe ich in der mobilen Version im Video jetzt schwarze Balken rechts und links und auf dem PC schwarze Balken oben und unten. Könntest du mir sagen, woran das liegt und wie ich das noch optimieren kann?

    Viele Grüße
    Nico

    Antworten

  28. Danke für die perfekte Hilfe!

    Youtube is im Vergleich zu Vimeo erheblich umständlicher. Ev. auch einen Tipp wie ich den Namen und Icon des Uploaders (Profil) entferne? Showinfo=0 bringt nichts.

    Antworten

    • Hallo Waldemar,

      showinfo wird leider nicht mehr unterstützt seit 25.09.2018. Auf der deutschen API Referenz haben sie es nicht upgedatet, aber auf der englischen Seite findest Du den Hinweis:

      showinfo
      Note: This parameter is deprecated and will be ignored after September 25, 2018.

      Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.

      https://developers.google.com/youtube/player_parameters?hl=en

      Auch beim rel Parameter ändert sich etwas: bei rel=0 werden bloß keine ähnlichen Videos aus anderen Kanälen angezeigt, eigene aber schon.

      The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.

      To be more specific:
      Prior to the change, if the parameter’s value is set to 0, then the player does not show related videos.
      After the change, if the rel parameter is set to 0, the player will show related videos that are from the same channel as the video that was just played.
      The showinfo parameter, which indicates whether the player should display information like the video title and uploader before the video starts playing, is also being deprecated. Following the change, the channel avatar and video title will always display before playback begins, when playback is paused, and when playback ends. The avatar being displayed is new behavior that will be consistent across all embedded players.
      These changes will become effective on or after September 25, 2018. After that time, the showinfo parameter will be ignored. The behavior following the changes is consistent with the current default behavior for embedded players with the exception of the channel avatar changes mentioned above.

      LG Martina

      Antworten

  29. Hi Martina, hat funktioniert, danke für die Anleitung.

    Gibt es die Möglichkeit, allen schon eingebetteten Videos per „Search and Replace“ o.ä. den div mitzugeben?
    Oder muss ich das manuell machen…?

    Schöne Grüße
    Angela

    Antworten

    • Hallo Angela,

      um das bei allen Videos automatisiert zu machen, müsstest Du mit sogenannten Regular Expressions arbeiten. Denn die verschiedenen Videos haben ja alle unterschiedliche Einbettungscodes, die sich an einer bestimmten Stelle unterscheiden. Das müsstest Du dann über phpMyAdmin machen, mir ist gerade kein Search & Replace Plugin für WP bekannt, das Regex unterstützt.
      Oder Du machst es mit einem Plugin wie Search & Replace (https://wordpress.org/plugins/search-and-replace/) oder Better Search Replace (https://wordpress.org/plugins/better-search-replace/) in 2 Schritten, indem Du erst den vorderen Teil mit dem beginnenden div ersetzt, und dann den hinteren Teil mit dem schließenden div.
      Achtung: bei manchen Themes kann es hier Probleme geben, z.B. bei Optimizepress. Deshalb auf jeden Fall vorher ein Backup der Datenbank machen!

      LG Martina

      Antworten

  30. DU BIST EIN GENIE!!!
    DAAAAAANKEEEE

    weißt du ob es möglich ist, beim eigebettetem Video einen eigenen Play Button zu benutzen und nicht den automatischen von YouTube?

    vielen Dank

    Antworten

Schreibe einen Kommentar