WordPress: Video einbinden – so funk­tio­niert’s

Wenn Sie der Ersteller bzw. Ei­gen­tü­mer eines Videos sind, können Sie dieses jederzeit in die Mediathek Ihres aktuellen WordPress-Projektes hochladen.

Schritt 1: Öffnen Sie den Me­di­en­be­reich im ersten Schritt per Klick auf die Schalt­flä­che „Medien“ im linken Sei­ten­me­nü:

Schritt 2: Klicken Sie an­schlie­ßend der Reihe nach auf „Datei hin­zu­fü­gen“ und „Datei auswählen“. Nun können Sie den Spei­cher­ort der ge­wünsch­ten Vi­deo­da­tei angeben und be­stä­ti­gen, um den Upload in die Mediathek zu starten. Al­ter­na­tiv ziehen Sie den Clip einfach per Drag-and-drop in den dafür vor­ge­se­he­nen Bereich (ge­stri­chel­te Linien):

Schritt 3: Öffnen Sie nun die WordPress-Seite, der Sie das Video hin­zu­fü­gen möchten und klicken Sie auf das Plus-Zeichen, um einen neuen Block hin­zu­zu­fü­gen:

Schritt 4: Scrollen Sie zur Rubrik „Medien“ und wählen Sie den Eintrag „Video“ aus, um der Seite einen Block für Video-Content hin­zu­zu­fü­gen. In diesem Block klicken Sie nun auf „Mediathek“. WordPress öffnet die Übersicht der ver­füg­ba­ren Videos, wobei Sie das ge­wünsch­te Exemplar ganz einfach per Links­klick auswählen können. Erweitern Sie das Element wahlweise um Metadaten wie einen Titel, eine Be­schrif­tung und eine Be­schrei­bung und binden Sie das Video schließ­lich per Klick auf den „Auswählen“-Button in Ihr WordPress-Projekt ein.

Das Video ist nun in Ihre WordPress-Seite ein­ge­bun­den. Bei Bedarf können Sie es wie jeden anderen Content-Block an eine beliebige andere Stelle bewegen bzw. mit anderen Elementen aus­tau­schen.

Wer sich den Upload von Videos in den eigenen Webspace und dadurch eine Menge Spei­cher­platz und Re­chen­power sparen möchte, kann seinen Video-Content auch auf einer Video-Plattform wie YouTube oder Vimeo hochladen. Dort haben Sie dann die Mög­lich­keit, einen Ein­bet­tungs­code (auf Englisch: Embed-Code) abzurufen, mit dessen Hilfe Sie das jeweilige Video in Ihr WordPress-Projekt einbinden können. Je nach Aus­rich­tung und Typ Ihrer Website können Sie auf diese Art natürlich auch Videos von anderen Nutzern in Ihre Website einfügen – vor­aus­ge­setzt, diese User besitzen die Rechte für den Inhalt und haben die Videos für die Öf­fent­lich­keit frei­ge­ge­ben.

Um ein YouTube-Video (bei anderen Platt­for­men un­ter­schei­det sich die Vor­ge­hens­wei­se natürlich etwas) per Embed-Code hin­zu­zu­fü­gen, gehen Sie wie folgt vor:

Schritt 1: Rufen Sie das ge­wünsch­te YouTube-Video auf und klicken auf die Schalt­flä­che „Teilen“, die Sie direkt unter dem Clip finden.

Schritt 2: Wählen Sie die Option „Einbetten“ aus, um zu den Ein­bet­tungs-Optionen zu gelangen. Dort können Sie es nun entweder bei den Stan­dard­ein­stel­lun­gen belassen oder den Embed-Code noch ein wenig mo­di­fi­zie­ren. Zum einen haben Sie nämlich die Mög­lich­keit, einen in­di­vi­du­el­len Start­punkt fest­zu­le­gen, ab dem das ein­ge­bun­de­ne Video später au­to­ma­tisch starten soll („Starten bei“). Zum anderen können Sie an dieser Stelle über das gleich­na­mi­ge Feld den er­wei­ter­ten Da­ten­schutz­mo­dus ak­ti­vie­ren, um die Pri­vat­sphä­re Ihrer Besucher zu schützen. Ab­schlie­ßend klicken Sie auf „Kopieren“, um den Code zwecks WordPress-Import in die Zwi­schen­ab­la­ge zu speichern.

Schritt 3: Rufen Sie nun im WordPress-Backend die Seite auf, in die Sie das Video einbinden möchten. Fügen Sie den in der Zwi­schen­ab­la­ge be­find­li­chen Link des Clips direkt an der ge­wünsch­ten Stelle ein, indem Sie einen HTML-Block anlegen und die Tas­ten­kom­bi­na­ti­on [Strg] + [v] verwenden oder rechts­kli­cken und den Punkt „Einfügen“ auswählen.

Schritt 4: WordPress fügt das Video nun au­to­ma­tisch im gewohnten Format ein. Per Klick auf „Vorschau“ können Sie sich das Resultat testweise anschauen.

Un­ab­hän­gig davon, ob Sie Videos intern oder extern hochladen, ist die Ver­wen­dung von WordPress-Video-Plugins für jeden emp­feh­lens­wert, der Be­wegt­bil­der auf möglichst einfache Weise einbinden und gleich­zei­tig von prak­ti­schen Zu­satz­funk­tio­nen pro­fi­tie­ren möchte. Zu diesem Zweck müssen Sie lediglich das ge­wünsch­te Plugin in­stal­lie­ren. WordPress wird dadurch um einfach zu be­die­nen­de Menüs im Backend bzw. Schalt­flä­chen im Editor erweitert, die den Umgang mit der je­wei­li­gen Er­wei­te­rung regeln.

Der ein­fachs­te Weg, einen Überblick über die ver­füg­ba­ren WordPress-Video-Plugins zu erhalten, führt über den Plugin-Bereich im Backend. Dort können Sie die ge­wünsch­ten Er­wei­te­run­gen auch gleich in­stal­lie­ren, kon­fi­gu­rie­ren und ak­ti­vie­ren (und bei Bedarf wieder de­ak­ti­vie­ren oder löschen). Die einzelnen Schritte gestalten sich dabei fol­gen­der­ma­ßen:

Schritt 1: Rufen Sie im linken Sei­ten­me­nü des WordPress-Backends die Rubrik „Plugins“ auf und klicken Sie auf den Menüpunkt „In­stal­lie­ren“.

Schritt 2: In die Such­leis­te (oben rechts) können Sie nun ein be­lie­bi­ges Schlag­wort eintippen, um nach dem passenden WordPress-Video-Plugin zu suchen. Für einen groben Überblick geben Sie bei­spiels­wei­se einfach den Such­be­griff „Video“ ein:

Schritt 3: Haben Sie sich für eine Er­wei­te­rung ent­schei­den, klicken Sie in der ent­spre­chen­den Kachel auf den Button „Jetzt in­stal­lie­ren“. Nach der In­stal­la­ti­on können Sie das Plugin direkt über die nun prä­sen­tier­te „Ak­ti­vie­ren“-Schalt­flä­che an­schal­ten:

Schritt 4: Wahlweise können Sie die Er­wei­te­rung nun über das Untermenü „In­stal­lier­te Plugins“ oder – in den meisten Fällen – über eine neue in­di­vi­du­el­le Schalt­flä­che im Sei­ten­me­nü des Backends ansteuern, wie bei dem hier gewählten Beispiel-Plugin „Video Gallery“ von Ori­gin­Code:

Geht es um die Ein­bin­dung von YouTube-Content, führt kaum ein Weg an Embed Plus for YouTube vorbei. Das Plugin, das über 200.000 aktive In­stal­la­tio­nen vorweisen kann und mit dem WordPress-Gutenberg-Editor kom­pa­ti­bel ist, un­ter­stützt Sie nicht nur bei der Ein­bet­tung einzelner YouTube-Clips – auch komplette Playlists oder Channel sowie Live­streams lassen sich mit der Er­wei­te­rung einfügen. Mit dem „YouTube Wizard“ steht zu diesem Zweck ein nut­zer­freund­li­cher Ein­rich­tungs­ma­na­ger direkt im Editor zur Verfügung. Per Upgrade auf die kos­ten­pflich­ti­ge Pro-Version lassen sich weitere Features wie ein au­to­ma­ti­sches Video-SEO-Markup oder eine Caching-Funktion frei­schal­ten.

Wer einen Blog betreibt, weiß um die Wich­tig­keit einer rei­bungs­lo­sen Per­for­mance auf allen End­ge­rä­ten. Ins­be­son­de­re die Ladezeit spielt hier eine über­ge­ord­ne­te Rolle. Sind YouTube-Videos in Ihrem WordPress-Blog ein wichtiger Be­stand­teil, ist der Einsatz von WP YouTube Lyte daher wärmstens zu empfehlen. Das Plugin er­mög­licht es, Lazy Loading auf alle ein­ge­bun­de­nen WordPress-Videos an­zu­wen­den: Die re­ak­ti­ons­schnel­len „Lite YouTube Embeds“ sehen aus wie normal ein­ge­bet­te­te YouTube-Clips, rufen den spei­cher­in­ten­si­ven Player aber nur auf, wenn ein Besucher sie explizit anklickt. Ein weiteres Feature der Er­wei­te­rung: YouTube-Videos lassen sich lokal zwi­schen­spei­chern, was weitere Zugriffe auf die Server der Vi­deo­platt­form erübrigt.

Unter den Ge­stal­tungs­mit­teln für moderne Web­pro­jek­te zählt das so­ge­nann­te Parallax-Scrolling mitt­ler­wei­le fast schon zum Stan­dard­re­per­toire. Das kos­ten­lo­se Plugin Advanced WordPress Back­grounds (AWB) un­ter­stützt Sie dabei, den Effekt in Ihrem WordPress-Projekt um­zu­set­zen. Wahlweise erzeugen Sie mit der Er­wei­te­rung auf Basis von Bildern oder Videos (selbst gehostet, YouTube oder Vimeo) in­di­vi­du­el­le Parallax-Hin­ter­grün­de für aus­ge­wähl­te Seiten. Die tech­ni­sche Basis hierfür bildet das leis­tungs­star­ke Ja­va­Script-Plugin Jarallax.

Ein beliebter Weg, im Web gleich mehrere Videos zu prä­sen­tie­ren, sind Galerien – und das Plugin Video Gallery von Total Soft ist eine her­vor­ra­gen­de Lösung, diese für das eigene Web­pro­jekt zu rea­li­sie­ren. Mit der kos­ten­frei­en Ba­sis­va­ri­an­te können Sie Vi­deo­ga­le­rien mit einer be­lie­bi­gen Anzahl an Clips von YouTube, Vimeo und Wistia oder aus eigener Quelle zu­sam­men­stel­len und ver­öf­fent­li­chen. Alle Galerien sind dabei au­to­ma­tisch im Re­spon­si­ve Webdesign und per Drag-and-drop sor­tier­bar. Für eine in­di­vi­du­el­le Ge­stal­tung der Galerien empfiehlt sich ein Upgrade auf eine der kos­ten­pflich­ti­gen Versionen (ab 12,79 €): Durch dieses erhalten Sie Zugriff auf zu­sätz­li­che Galerie-Themes, Fonts, Hover-Effekte und diverse weitere Style-Optionen.