Tipps

Videos richtig in WordPress Texte einbetten

Videos richtig in WordPress Texte einbetten

Durch Videos werden Ihre Beiträge noch lebendiger. Sehr beliebt – weil bestens kompatibel – sind YouTube Videos. Öffentliche Videos dürfen Sie auch in Ihrem Blog einbinden. Absolut unique sind natürlich eigene Videos, die Sie über YouTube hochgeladen haben. So oder so: Für die perfekte Platzierung reicht es bei einigen Themes aus, die Video-URL zu kopieren und in den Text einzufügen, andere erfordern noch zusätzliche Bearbeitung.

Der einfache Weg ein YouTube Video einzubinden

WordPress macht es dank einer Funktion namens oEmbed ganz einfach ein Video (YouTube oder Vimeo) in Ihren Beitrag einzubinden. In der Regel brauchen Sie nur die Video-URL aus der Adressleiste Ihres Webbrowsers zu kopieren.
YouTube Video URL

YouTube URL kopieren

Diese URL fügen Sie anschließend in einer eigenen Zeile in den Editor Ihres Beitrags ein. Dabei ist es ratsam, den Texteditor zu verwenden um zu vermeiden, dass WordPress Steuerzeichen der URL hinzufügt und so nur ein Link eingefügt wird.
Einfügen einer YouTube URL

YouTube Video in eigene Zeile einfügen

Der Rest erledigt sich von selbst! Das Video wird in etwa so aussehen:

Internet-Adresse (URL) bei WordPress einstellen

Die Größe des eingebeteten Videos beeinflussen

Möchten Sie die Größe des Videos beeinflussen, können Sie das Video in die Shortcodes
[embed width="300" height="169"]…[/embed]
einfassen. Width steht für die Breite und height für die Höhe des Videos. Geben Sie nur die Breite oder die Höhe an, dann ergibt sich der andere Wert automatisch:
[embed width="300"]…[/embed]
zum Beispiel:
.

Das eingebetete Video zentrieren

Mit Hilfe der Shortcodes haben Sie auch die Möglichkeit, das Video zu zentrieren:
Videos zentrieren

Videos zentrieren

Der passende Code dazu sieht so aus:
<style="text-align: center;">

</p>

Eingebundene Videos im responsive Webdesign

Bei modernen WordPress Themes passt sich die Breite der Videos automatisch an die Breite des Textfensters an. Testen Sie durch Verkleinerung der Breite Ihres Browser-Fensters oder indem Sie Ihre Website über ein Smartphone aufrufen, ob das bei Ihnen der Fall ist.
Für diejenigen unter Ihnen, die noch ein etwas älteres Webdesign verwenden (oder eine suboptimal programmiertes Theme) verweisen wir auf einen grandiosen Tipp, den wir auf der Website von Elmastudio gefunden haben. Auf der Seite CSS-Tip: Eingebettete Videos für responsive Webdesign optimieren wird eine sehr schöne Methode beschrieben, mit der sich jedes eingebetete Video flexibel in der Größe anpasst.

Das Einbinden eines Videos funktioniert nicht

Wird kein Video sondern nur ein Link in Ihrem Beitrag angezeigt, kann das zwei Gründe haben:

  1. Sie haben für die eingefügte URL keine eigene frei Zeile verwendet oder WordPress hat die eingefügte URL automatisch in einen Link gewandelt. Verwenden Sie beim einfügen den der URL den Text-Editor statt den Visuell-Editor, sind Sie auf der sicheren Seite.
  2. Der Urheber erlaubt das einbetten seines Videos nicht. In diesem Fall können Sie nichts ändern. WordPress erstellt automatisch einen Link.

Wenn Sie das Video als iFrame einbetten müssen

Gibt es für Sie einen Grund, Videos auf dem klassischen Weg als iFrame einzubinden, dann sollten Sie weiterlesen. Auch bei dieser Methode haben Sie viele Anpassungsmöglichkeiten.
Um den nötigen iFrame-Code zu erhalten, klicken Sie unter dem gewählten YouTube Video die Funktion „Teilen“ an. In dem nun eingeblendeten Menü gehen Sie auf „einbetten“. Jetzt erscheint (gerahmt) der HTML-Einbettungscode. Darunter, in einem weiteren Rahmen, sehen sie die Größe des Videos. Zuerst klicken Sie rechts neben der Größenangabe auf den kleinen Pfeil und wählen in der sich öffnenden Auswahl die Größe aus, die Sie für Ihren Blogtext haben wollen. Beim Verändern dieser Werte sehen Sie übrigens auch, wie sich der Einbettungscode darüber entsprechend anpasst.
Einbettungscode von YouTube Videos finden

Einbettungscode von YouTube Videos finden

Den Einbettungscode kopieren und einfügen

Entspricht die Größe Ihren Vorstellungen, kopieren Sie den Einbettungscode und setzen ihn in Ihren Blogtext ein. Wählen Sie dazu die Textansicht aus und fügen den Code an die Stelle im Text ein, an der das Video eingebunden werden soll.
Einbettungscode für Ihr Video im Text einfügen

Einbettungscode für Ihr Video im Text einfügen

Jetzt können Sie analog der oben beschriebenen Methode Ihre Videos ausrichten, zentrieren oder für Responsive Webdesign optimieren.

turned_in_notMedien

17 Kommentare. Wir freuen uns über Ihren Kommentar

  • Walter Lendl
    19. Mai 2020 16:42

    Wenn ich den Link zum Video in den Beitrag einfüge, öffnet sich das Video im Overlay, aber ich bekomme immer die Ansage: “noreferrer noopener” und das Vimeo-Video lässt sich nicht abspielen. Was kann ich tun???

    Antworten
  • Bei mir erscheint wenn ich es einbinden will dieses : There is 1 error which must be fixed before you can save.

    Antworten
  • Hallo, auch bei funktioniert die Größenanpassung beim Einbetten des iFrame nicht.. gibt es da andere Möglichkeiten/Ideen?
    Danke!

    Antworten
  • Johannes Bühlbecker
    29. August 2017 7:53

    Hallo, schöner und hilfreicher Beitrag – vielen Dank!
    Wie kann ich denn erreichen, dass das Video automatisch und in einer Endlosschleife startet?

    Antworten
  • Hallo Leute,
    vielen Dank. Leider kann ich die angezeigte Größe des Videos nicht ändern. Ok. Ich kann es im Code ändern ([embed width="450"]) aber es wird nicht berücksichtigt. WP zeigt das Video immer RIESIG auf der Page. Das schaut nicht gut aus :D

    Antworten
  • Vielen Dank für diesen Tipp, es funktioniert wunderbar! Kleiner Wermutstropfen: Trotz definierter Breite lässt sich die Größe des eingebetteten Videos nicht beeinflussen. Am PC wird das Video so auf volle Seitenbreite gezogen – dadurch leider etwas verpixelte Darstellung …

    Antworten
  • Hey, irgendwie funktioniert dieses Code-Snippet nicht, da wird man auf _blank verlinkt…

    Antworten
  • So einfach kann es sein. Mittlerweile macht das WordPress ja auch schon automatisch wenn man einfach den Link in der URL reinkopiert. Rein rechtlich ist man aber glaub ich auf der sicheren Seite wenn man vom Uploader unter Teilen>Einbetten überhaupt die Möglichkeit vorfindet dies tun zu können. Sollte diese Option fehlen würde ich es nicht auf meiner Seite einbetten.
    Schöner Beitrag, Grüße
    Stefan

    Antworten
  • Cooler Artikel, aber ich bekomme es nicht hin, das Video auomatisch abspielen zu lassen und die Größe zu verändern. Mit dem HTML Code lässt sich die Größe innerhalb von WordPress nicht verändern und bei dem dem Embeded kann ich das Autoplay nicht nutzen. Weiß einer eine Lösung?
    liebe Grüße und weiter so
    Lars Pilawski

    Antworten
    • Kim Salewski
      29. August 2016 12:35

      Hallo Lars,
      Wenn du ein iframe nutzt, wie in dem Beitrag beschrieben, kannst du die Größe des Videos ändern, in dem du direkt hinter dem <iframe zum Beispiel width=”500″ oder auch height=”300″ einfügst.
      Viele liebe Grüße,
      Kim

      Antworten
  • Danke für die tole Anleitung. Hat mir sehr weiter geholfen !

    Antworten
  • Danke jetzt weiß ich endlich wie es funktioniert

    Antworten
  • Herzlichen Dank! Tolle Anleitung, sehr hilfreich für uns Bürgerinitiativen.

    Antworten
  • Hallo liebe Elbnetz-Gemeinde ich danke euch für die guten Tipps. Ich hab mir schon einen Wolf Gesucht wie ich diese Videos in meinem Blog einbauen kann. Danke vielmals

    Antworten

Wir freuen uns über Ihren Kommentar!

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.
You need to agree with the terms to proceed

expand_less
Elbnetz GmbH hat 4,96 von 5 Sternen 50 Bewertungen auf ProvenExpert.com