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.

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.
5 Contentideen für dich als Hochzeitsdienstleister
Als Hochzeitsdienstleisterin weißt du, wie wichtig es ist, nicht nur deinen Kunden den perfekten...
Wie eine Website Hochzeitsdienstleistern hilft, Kunden mit sozialer Angst anzusprechen
Soziale Angst ist kein Spaß und nimmt regelmäßig zu. In der heutigen digitalen Welt ist es leicht, dich dennoch zu kontaktieren.
Gründe, warum dein Hochzeitsbusiness möglicherweise nicht wächst
Du hast dich endlich in deinem Hochzeitsbusiness selbstständig gemacht und bist mit deiner...