Video mit Elementor, Elementor Pro und Advanced Controls

Das Widget Video ist im Bereich Grundlegend zu finden, also benötigt man auch keine Pro-Version von Elementor um es zu nutzen. 

Zieht man es in einen Container wird automatisch das Platzhaltervideo von Elementor von Youtube eingebunden. Wechselt man die Quelle zu Vimeo oder Dailymotion wird automatisch auch der Platzhalter dieser Services verwendet.

Im Toggle Video unter dem ersten Tab Inhalt sind die wichtigsten Einstellungen zu treffen.

Die Quelle betrifft den Server, der Link ist die URL zum Video dieser Quelle. Bei der Voreinstellung Youtube  wird der Link im Format

angezeigt, beide funktionieren. Wichtig ist die ID des Videos.

Youtube erlaubt die Festlegung einer Startzeit und einer Endzeit. Die Einheit sind Sekunden. Damit kann man ein Video x Sekunden nach dem Beginn des Videos starten und y Sekunden nach dem Beginn des Videos enden lassen. 

Darunter folgen die Video-Optionen. Ist die Automatische Wiedergabe aktiviert  wird das Video unmittelbar abgespielt. Dh aber auch, dass das Laden des Videos sofort erfolgt. Diese Option ist nach Möglichkeit zu meiden, weil sie dem User gegenüber unfreundlich ist (Ton, Ladezeit, etc.).

Stumm schalten kann Userfreundlich sein, das kommt wohl auf die Art des Videos an. Ebenso Endlosschleife. Ist ein Video ein Dekoelement kann es wohl stumm bleiben und immer wieder von vorne neu abgespielt werden. 

Je nachdem ob man Interaktion des Users mit dem Video ermöglichen will kann man die Player-Buttons einblenden. Sind diese aktiviert ist darunter der Schalter mit der schönen deutschen Übersetzung Bescheidenes Branding zu finden. Gemeint ist hier, dass das Youtube-Logo innerhalb der Player-Buttons ausgeblendet wird. 

Der Schalter für Privater Modus soll sicher stellen, dass erst dann Userdaten zu Youtube übertragen werden wenn der Benutzer das Video gestartet hat. Gute Sache. Grundsätzlich ist trotzdem eine Zustimmung des Users (Consent) einzuholen, sobald Videos auf fremden Servern gehostet werden.

Die Option Lazy Load versucht, wie auch bei Bildern, erst dann Daten vom Videoserver zu übertragen wenn diese wirklich benötigt werden. Einschalten!

Die Auswahlmöglichkeit für Vorgeschlagene Videos bechränkt sich auf Alle oder Aktueller Kanal. Youtube ist eben auch nur Alphabet …

Im Toggle Bildüberlagerung findet man nach der Aktivierung der Funktion sehr nützliche Optionen. 

Zuerst natürlich die Bildauswahl. Hier kann man ein Statisches Bild vor das Video setzen und damit kontrollieren, was dem User angezeigt wird. Ohne diesem Bild entscheidet Youtube welches Standbild angezeigt wird. Darunter ist wie immer die passende Bildgröße zu wählen um die Ladezeit möglichst gering zu halten. 

Darunter kann man das Start-Icon für das Video auswählen oder auch ausblenden. 2teres kann Sinn machen, wenn man ein entsprechendes Icon zB. im Bild selber integriert hat und dem User ohnehin klar ist, dass er auf das Bild klicken muß um das Video zu starten. Hier kann man auch das Icon auswählen oder auch ein eignes Icon hochladen. (SVG-Format!).

Die Funktion Lightbox erlaubt schliesslich das Abspielen in einem Modalfenster, was wirklich sehr oft die beste Lösung für eingebundene Videos ist. 

Über den Tab  Stil sind drei Abschnitte erreichbar um Formatierungen vorzunehmen. 

Der erste Video dient zur Einstellung der Proportionen, hier wird das Seitenverhältnis des eingebundenen Videos festgelegt. Wer mag kann mit den CSS-Filter Möglichkeiten experimentieren. Viele Anwendungen dafür wird es wohl nicht geben, am ehesten noch schwarz/weiss-Effekte.

Wer nun mehrere zusammen gehördene Videos auf einer Webseite unterbringen will sollte sich das recht nette Widget Video Playlist anschauen. Dieses Widget ist Teil von Elementor Pro, also kostenpflichtig.  Die Videos einer Playlist müssen nicht am selben Server gehostet werden, mann kann also zB Vimeo und Youtube mischen etc.

Zusätzlich zu den eigentlichen Videos kann man in 2 optional zu benutzenden Tabs Infos unterbringen (in Rich-Text-Boxen). Ausserdem kann man mittels Seperatoren die Videoliste strukturieren, ein Overlay-Image einfügen und jeden einzelnen Bereich der Playlist gestalten. Es ist komplex, aber nicht besonders kompliziert.

Im Tab Inhalt der erste Abschnitt Playlist ist für die Einbindung und Reihenfolge verantwortlich. Der Playlist Name wird im Topbar des Listenbereichs angezeigt. Darunter folgt die Elemntor-typische Auflistung der einzelnen Videos unter Playlist Items. 

Jedes einzelne Video hat einen Typ (Youtube, Vimeo oder Selfhostet) und einen Link. Darunter ist ein sehr nützlicher Button mit der Funktion Get Video Data. Damit kann man sich die Angaben zu dem Titel, der Dauer (Duration) und dem Thumbnail des Videos vom Videohoster holen. Natürlich kann man die Werte auch manuell setzen. 

Darunter gibt es für jedes Video die Möglichkeit die Content Tabs zu aktivieren. Damit werden die Inhaltsbereiche aktiviert die - mit 2 Tabs ausgestattet - jeweils einen Rich-Text-Bereich haben. Also frei gestaltbare Textboxen die auch Mediadaten einbinden können. 

Wer jetzt zwischen den Videos einen Seperator in Form eines Zwischentitels will kann den Typ Abschnitt wählen. Damit kann man einen Text eintragen der zwischen den Videos der Liste ausgegeben wird. 

Im zweiten Abschnitt Tabelle kann man den Infobereich mit den beiden Tabs konfigurieren. Hier werden die Tabnamen eingegeben und definiert, ob man diese Tabs einklappen können soll.

Der dritte Abschnitt Image Overlay ist gleich wie beim Video-Widget, nur dass er eben nicht für ein einzelnes Video sondern für den Videobereich aller Videos gilt.

Zuletzt unter Weitere Optionen findet man Einstellungen für Automatisches abspielen (nach dem Laden/on Load und nächstes Video/next up). Weiters kann man ein Flag für Indicate Watched setzen, also einen Anzeiger für bereits angesehende Videos der Liste. Weiters werden hier für den Listenbereich die Informationen der Video Anzahl (Video Count), die Dauer der Videos (Duration) und die einzelnen Vorschaubilder verwaltet. Schliesslich ist hier auch die Icons für den Abspielbutton und die bereits gesehenen Videos (in der Listenansicht!) auszuwählen. 

Eine Lazy Load-Funktion für die Videos gibt es auch hier.

Natürlich stehen dann im Stilmenü auch die passenden Gestaltungsmöglichkeiten bereit. Man kann damit Farben, Rahmen und Schatten der Controls gestalten und so den Videoplayer genau auf das CI der Website abstimmen. 

Wenn man etwas übermutig in den Farbtopf greift sind auch Player-Gestaltungen wie im Beispiel hier möglich: