Youtube-Videos in die eigene Website einbinden

07.03.2022 — Youtube, JavaScript, API, iframe — 1 min read

Youtube stellt mit der Youtube-iFrame API die Möglichkeit bereit, Youtube-Videos in die eigene Website einzubetten. Der Code ist straight-forward und benötigt nicht viel Zeit, um ihn zu implementieren. Die Dokumentation befindet sich hier.

Es geht auch einfacher, indem ein iFrame-Element benutzt wird. Dieses Element bekommt das Attribut src, dass den Youtube-Link beinhalten soll.

<iframe id="player"
     src="https://www.youtube.com/embed/NUYvbT6vTPs?enablejsapi=1&origin=http://example.com"
     frameborder="0"
></iframe>

Soweit so gut, jedoch gibt es noch ein einziges Problem. Das iframe-Element ist nicht responsive/dynamisch. Das Element soll sich automatisch auf die Bildschirmbreite anpassen, das es zur Zeit nicht tut. Hier kommt CSS ins Spiel, dass den Style des Elements vorgibt und dafür sorgt, dass das Design am Smartphone oder Computer gleich aussieht.

<div class="videoWrapper" style="
        position: relative;
       	padding-bottom: 56.25%; /* Erzeugt einen Platzhalter für das responsive Video - 56,25% entsprechen dem Seitenverhältnis 16:9 */
        ">

  <iframe id="player"
        src="https://www.youtube.com/embed/NUYvbT6vTPs?enablejsapi=1&origin=http://example.com"
        frameborder="0"
        style="
            position: absolute;
            width: 100%;
            height: 100%;">
  </iframe>
</div>

Falls du es selbst ausprobieren möchtest und keine Website zur Verfügung hast, kannst du in dieser Sandbox-Umgebung den Code testen und verändern.

Um zu zeigen, dass der Code auch funktioniert, habe ich noch ein Video eingebettet. Viel Spaß!

Credits: Blog Eintrag, Youtube iFrame API