Flygplats.de

Virtuelles Drehkreuz für Computer und Technik

YouTube-Videos in WordPress einbinden

Eigentlich ist es seit WordPress 2.9 ziemlich einfach, ein YouTube-Video in einen Blog-Post einzufügen: Tippe im Editor die YouTube-Adresse des Videos in eine separate Zeile ein und schon ist dein Video eingebunden. WordPress ergänzt im Hintergrund automatisch den zusätzlich benötigten Code mithilfe von oEmbed.

Die Sache hat allerdings einen entscheidenden Nachteil: Die Videos haben eine feste Größe und passen sich bei einem responsiven Layout nicht ihrem Umfeld an.

Ich möchte dir deshalb zwei Alternativen vorstellen, wie du YouTube-Filme besser in deinen Post integrieren kannst.

Schnell und komfortabel mit Shortcodes Ultimate

Wenn du das Plugin Shortcodes Ultimate im Einsatz hast, ist die Aufgabe in wenigen Schritten und ohne weitere Eingriffe in deine Theme-Dateien erledigt.

  • Rufe das Video bei YouTube auf und kopiere aus der Adresszeile des Browsers die URL
  • Starte im Editor das Plugin, indem du auf den Button Insert Shortcode klickst
  • Wähle YouTube Advanced aus
  • Füge die URL des Videos ein
  • Stelle den Parameter Responsive auf „Yes“

Die restlichen Parameter kannst du nach Belieben setzen oder einfach lassen, wie sie sind. Sollte dein Blog ein Zertifikat verwenden, musst du Force HTTPS auf „Yes“ stellen, sonst wird dein Video nicht angezeigt (Falls du vorhin den Shortcode YouTube statt YouTube Advanced gewählt hast: dieser bietet die Option nicht an).

Mit etwas Handarbeit im Quellcode

Es geht auch ohne Plugin: Rufe dein Video in YouTube auf, klicke erst mit der rechten Maustaste darauf und dann mit der linken Maustaste auf Einbettungscode kopieren. Wechsle in WordPress vom visuellen in den Texteditor, füge den soeben kopierten Quelltext an der gewünschten Stelle ein und umschließe ihn mit einem Div-Container:

<div class="videoWrapper">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/oMf3lSGKJ-o" frameborder="0" allowfullscreen>
</iframe>
<div>

Zusätzlich musst du dein CSS um folgende Angaben ergänzen:

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0;
    height: 0;
    margin: 1.5rem 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Wenn dich interessiert, was technisch genau bei dieser Lösung passiert, lies bitte die unten verlinkten, empfehlenswerten Artikel von CSS-TRICKS und Holger Könemann.

Solltest du beim Betrachten des Bespielvideos Lust auf Secondhand-Shopping in Hamburg bekommen haben, empfehle ich dir die Seite Ebbe Digga.

Links