Do you want to autoplay and loop videos in Divi? Do you also want to self-host your video to avoid annoying Youtube or Vimeo branding? But you are concerned that your website performance slows significantly down? Then this tutorial is for you. Unfortunately Divi doesn’t support either functionality natively (except autoplay/loop/muting in background context), but you can implement this by making minor adjustments.
1. Step:
Upload your video as usual into the wordpress media library.
2. Step:
In Divi, select the video modul and place it where ever you want it on your page. Select your video from the media library. Now something important: In the video modul setting, head over to the advanced settings, and apply a custom CSS class by accessing Advanced > CSS ID & Classes > CSS Class (e.g., moovo-autoplay).
3. Step:
Next, on the page or post with the video module, add a Divi Code module, and insert the jQuery code below. Of course, if you would like to extend the autoplay and delay load option to all pages, you should add the jQuery code by going to Dashboard > Theme Options > Integration > Add code to the <head> of your page. Don’t forget to save your changes.
<script>
jQuery(document).ready(function() {
if (jQuery('.moovo-autoplay .et_pb_video_box').length !== 0) {
// Set video properties, including disabling preload
jQuery('.moovo-autoplay .et_pb_video_box').find('video').prop('muted', true);
jQuery(".moovo-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
jQuery(".moovo-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
jQuery(".moovo-autoplay .et_pb_video_box").find('video').attr('preload', 'none'); // Prevents preloading
jQuery('.moovo-autoplay .et_pb_video_box').find('video').removeAttr('controls');
// Function to play video when it enters the viewport
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
// Load the video source and play it when it enters the viewport
entry.target.load(); // Load video when it becomes visible
entry.target.play(); // Play the video
observer.unobserve(entry.target); // Stop observing after the first load and play
}
});
}, {
threshold: 0.5 // Play when 50% of the video is visible
});
// Apply the observer to each video
jQuery(".moovo-autoplay .et_pb_video_box").each(function() {
observer.observe(jQuery(this).find('video').get(0));
});
}
});
</script>
Explanations:
preload: "none": Thepreload="none"attribute prevents the video from loading initially, which conserves resources.entry.target.load(): When the video enters the viewport,load()is called to load the video before playing it.observer.unobserve(entry.target);: The observer unobserves the video after the initial play, so it doesn’t keep playing
With this code, your video will autoplay, loop, be muted, and only loaded when it comes into the viewport.
You can adjust the threshold as your prefer.
4. Variation
I you want your video to start loading in the background once page is opened, you can use the following modified code. The video only plays when it comes into the viewport, you can integrate an Intersection Observer that will monitor when the video enters the viewport. When the video is at least partially visible, it will begin playing.
<script>
jQuery(document).ready(function() {
if (jQuery('.moovo-autoplay .et_pb_video_box').length !== 0) {
// Set video properties
jQuery('.moovo-autoplay .et_pb_video_box').find('video').prop('muted', true);
jQuery(".moovo-autoplay .et_pb_video_box").find('video').attr('playsInline', '');
jQuery(".moovo-autoplay .et_pb_video_box").find('video').attr('loop', 'loop');
jQuery('.moovo-autoplay .et_pb_video_box').find('video').removeAttr('controls');
// Function to play video when it enters the viewport
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.play(); // Play the video when it comes into view
} else {
entry.target.pause(); // Pause the video when it leaves the view
}
});
}, {
threshold: 0.5 // Play when 50% of the video is visible
});
// Apply the observer to each video
jQuery(".moovo-autoplay .et_pb_video_box").each(function() {
observer.observe(jQuery(this).find('video').get(0));
});
}
});
</script>
0 Comments