Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
It is possible that when we want it to play automatically, this action is known as “Autoplay” and can be a way to add dynamism to the elements that make up our or the structure of our . However, in Divi, despite the fact that we have an exclusive module to insert videos, we do not have among its options how to enable automatic video playback in Divi.
Next, we are going to see several alternatives of how we can apply Autoplay in videos in Divi.
Autoplay on Youtube videos in Divi
We are going to start with the easiest method, that of right clicking on the video itself, and taking the corresponding code.
Then we continue to add the Code module from Divi, we paste the newly copied code and we will have an appearance similar to the following:
To the insertion code we are going to add a parameter that will be responsible for applying Autoplay to our video in Divi, which is the following:
?autoplay=1&mute=1
In the following way we are enabling autoplay on our Youtube video in Divi, however the video must also be muted, later we will explain why.
Autoplay on videos as background in Divi
All Divi modules have the peculiarity that a background can be stipulated and among its options we can place a video.
We are going to take the Separator or Divider module and in the background options we are going to load a video that we have preloaded in our .
Then for purposes of giving proportion to the module we are going to give it the following configurations for example.
- Separator Width: 0px
- Maximum width: we leave it by default
- Height: we define the desired proportion which can vary, in this case 500px
Autoplay using the Video Module
Last but not least, we are going to use a script that allows us, through a class applied to our video loaded directly from the video module, the option to play it automatically.
To do this, first of all we are going to load a video in the Divi video module, then from the Advanced tab we are going to assign it a class, which we will use later, for example “lwp-video-autoplay”
Then we are going to go to the Divi options-> Theme Options-> Integration and from the “Add code to the
of your blog” we are going to place the following code jQuery(document).ready(function() { if (jQuery(‘.lwp-video-autoplay .et_pb_video_box’).length !== 0) { jQuery(‘.lwp- video-autoplay .et_pb_video_box’).find(‘video’).prop(‘muted’, true); jQuery(“.lwp-video-autoplay .et_pb_video_box”).find(‘video’).attr(‘loop’ , ‘loop’); jQuery(“.lwp-video-autoplay .et_pb_video_box”).find(‘video’).attr(‘playsInline’, ”); jQuery(“.lwp-video-autoplay .et_pb_video_box”) .each(function() { jQuery(this).find(‘video’).get(0).play(); }); jQuery(‘.lwp-video-autoplay .et_pb_video_box’).find(‘video’ ).removeAttr(‘controls’); } });
This code must be inside some script tags so that it can be used.
As we can see in the added code, reference is made to the class applied to the video module previously, it is only enough to save changes and validate its operation
Autoplay video in Divi
Currently we can see that the video is played, however it has a couple of features, first, the video loop which means that it will repeat itself once at the end and second, the video controls are not visible.
These characteristics can be modified in the code presented as follows.
To deactivate the loop, simply delete or comment the following line:
jQuery(“.lwp-video-autoplay .et_pb_video_box”).find(‘video’).attr(‘loop’, ‘loop’);
To show and make available the controls in the video you can remove or comment the following line:
jQuery(‘.lwp-video-autoplay .et_pb_video_box’).find(‘video’).removeAttr(‘controls’);
Why add an autoplay video without audio
You will wonder why in the options presented in none is the audio played automatically, this has a force majeure reason and that is that Google can penalize the use of Autoplay on websites, since it causes a bad user experience. user, and minimizing data consumption has become a fundamental rule to consider while browsing any site on the internet
Another reason is the increasing use of ad blockers that are applied in browsers, which can interpret as an ad any media that is played without the user’s prior notice.
For more information you can take a look at this article from Google Developers which is quite interesting
Conclusions
We have been able to see that depending on our needs we can add the autoplay of videos in Divi, either from YouTube, as a background or from the module so that they can be played automatically, in the same way we must always bear in mind that this action implies that the video must be muted by law.
If you liked this publication and you are interested in continuing to learn more tips and improve in the construction of your sites using Divi, you can take a look at the free courses that we have in this regard:
Help us improve our content by sharing your opinion
WordPress and Woocommerce support team at .
Facebook Comments
Disqus