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.
Warum eine Hochzeitswebsite die Lösung für all eure Planungsprobleme ist
Hochzeiten – der schönste Tag im Leben, aber auch eine logistische Herausforderung. Jeder, der...
Hochzeitsmesse Bühl Baden: Mein erstes Mal als Ausstellerin
Die Hochzeitsmesse Bühl Baden am 12. und 13. Oktober 2024 – Wow! Wenn ich daran denke, bekomme ich...
To-Want-Liste bis zum 31. Dezember 2024
Es ist wieder soweit – das letzte Quartal des Jahres beginnt. Ich kann es kaum glauben, aber wir...