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.
Inhalt
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 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.
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
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:
- 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.
- 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
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
Jetzt können Sie analog der oben beschriebenen Methode Ihre Videos ausrichten, zentrieren oder für Responsive Webdesign optimieren.
17 Kommentare. Wir freuen uns über Ihren Kommentar
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???
Bei mir erscheint wenn ich es einbinden will dieses : There is 1 error which must be fixed before you can save.
Hallo, auch bei funktioniert die Größenanpassung beim Einbetten des iFrame nicht.. gibt es da andere Möglichkeiten/Ideen?
Danke!
Hallo, schöner und hilfreicher Beitrag – vielen Dank!
Wie kann ich denn erreichen, dass das Video automatisch und in einer Endlosschleife startet?
Moin Johannes,
um zum Beispiel ein YouTube-Video mit Autostart und Endlosschleife anzuzeigen, musst Du das Video über einen Einbettungscode einbinden. Hier findest Du eine entsprechende Anleitung: http://www.somethinkspecial.de/youtube-video-autoplay-loop.html
Besten Gruß,
Die Elbnetz-Redaktion
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
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 …
Hey, irgendwie funktioniert dieses Code-Snippet nicht, da wird man auf _blank verlinkt…
Vielen Dank für den Hinweis.
Wir haben es korrigiert.
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
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
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
<iframezum Beispiel width=“500″ oder auch height=“300″ einfügst.Viele liebe Grüße,
Kim
Danke für die tole Anleitung. Hat mir sehr weiter geholfen !
Danke jetzt weiß ich endlich wie es funktioniert
Herzlichen Dank! Tolle Anleitung, sehr hilfreich für uns Bürgerinitiativen.
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
Merci vielmals :-)