So aktivierst du Autoplay für Videos in Divi: Eine Schritt-für-Schritt-Anleitung

von | Sep. 12, 2024 | Tutorials, Webdesign | 0 Kommentare

Obwohl Divi von Haus aus keine Autoplay-Funktion für Videos anbietet, kannst du diese ganz einfach durch kleine Anpassungen an bestimmten Divi-Modulen aktivieren.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du für deine hochgeladenen Videos Autoplay in Divi mit CSS einstellst.

Wichtige Regeln für Autoplay-Videos in Divi:

  • Stummgeschaltetes Autoplay: Moderne Browser wie Google Chrome verlangen, dass Videos mit Autoplay stummgeschaltet sind.
  • MP4/MOV bevorzugt: Diese Formate werden von den meisten Browsern unterstützt und funktionieren besonders gut mit Divi.
  • Eingeschränktes Looping: Looping ist nicht bei allen Methoden verfügbar, z. B. bei YouTube-Videos. Mit individuellem Code kannst du aber auch das erreichen.
So aktivierst du Autoplay für Videos in Divi1

Schritt 1: Lade dein Video hoch

Gehe zu deiner ausgewählten Seite oder deinem Beitrag, füge das Videomodul ein und lade deine Videodatei (im MP4- oder WEBM-Format) hoch. Ich bevorzuge WEBM.

Schritt 2: Benutzerdefinierte CSS-Klasse

Wende eine benutzerdefinierte CSS-Klasse an, indem du zu Erweitert > CSS-ID & Klassen > CSS-Klasse gehst. Tippe joy-video-autoplay ein.

Schritt 3: Füge nun jQuery-Code hinzu

Füge nun jQuery-Code hinzu, indem du zum Dashboard gehst > Design-Optionen > Integration > Code zum <head> deines Blogs hinzufügen. Füge anschließend den folgenden Code ein, um Autoplay auf allen Seiten und Beiträgen zu aktivieren, und speichere die Änderungen.

<script>
jQuery(document).ready(function() {
if (jQuery(‚.joy-video-autoplay .et_pb_video_box‘).length !== 0) {
jQuery(‚.joy-video-autoplay .et_pb_video_box‘).find(‚video‘).prop(‚muted‘, true);
jQuery(„.joy-video-autoplay .et_pb_video_box“).find(‚video‘).attr(‚playsInline‘, “);
jQuery(„.joy-video-autoplay .et_pb_video_box“).find(‚video‘).attr(‚loop‘, ‚loop‘);
jQuery(„.joy-video-autoplay .et_pb_video_box“).each(function() {
jQuery(this).find(‚video‘).get(0).play();
});
jQuery(‚.joy-video-autoplay .et_pb_video_box‘).find(‚video‘).removeAttr(‚controls‘);
}
});
</script>

Schritt 4: Verlasse nun den visuellen Builder

Verlasse nun den visuellen Builder, um den Autoplay-Effekt in der Vorschau zu sehen. Du kannst Zeile 6 entfernen, um den Schleifen-Effekt zu stoppen, und Zeile 10, um die Steuerelemente anzuzeigen.

Beispiel:

Profi-Tipp: Anstatt die Autoplay-Funktion auf allen Seiten und Beiträgen zu aktivieren, kannst du sie nur für eine einzelne Seite oder einen Beitrag aktivieren. Öffne einfach die Seite oder den Beitrag, füge das Divi-Code-Modul hinzu und trage dort den jQuery-Code ein.

Kommentar absenden

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