Divi Theme Gallery Module Change Columns On Tablet And Mobile

How to add a video that autoplays only when in view with the Divi Theme.

In this video we will be showing how to create this feature using a bit of custom Javascript ( Link below ).
Today we will demonstrating how to create this feature with a Divi Code Module and Divi Video Module.
So follow along with this video to see how to create this with your Divi site.

In this video we will cover:

Adding A Divi Code Module.
Adding A Divi Video Module.
Adding A Video Via URL.
Using A CSS ID.
Adding The JS Code.
Adding The CSS ID To The Code.

We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance
the look and user experience of your website.

Incorporating videos into web design has become increasingly popular in recent years, and for good reason. There are several benefits to using videos in web design, including improved user engagement and enhanced storytelling capabilities. Videos can help convey complex messages and ideas in a more engaging and memorable way compared to text and images alone. They can also increase the time spent on a website and reduce bounce rates, as users are more likely to stick around and explore the content when a video is involved. Additionally, videos can help showcase products and services in action, build trust with customers, and ultimately drive conversions. With the rise of video-focused platforms like YouTube and TikTok, incorporating videos into web design is becoming more important than ever before.

The Code Used Today: Feel Free To Copy and Paste

<script>
jQuery(document).ready(function($) {
var video = $(‘#ytv1 iframe’);
var videoSrc = video.attr(‘src’);
var videoPlay = false;
var videoHeight = video.height();
var viewportHeight = $(window).height();
var scrollPos = $(window).scrollTop();

function preloadVideo() {
video.attr(‘src’, videoSrc + ‘&autoplay=0&rel=0&modestbranding=1&autohide=1&showinfo=0&controls=0’);
}

function checkVideo() {
if (!videoPlay && (scrollPos + viewportHeight) > video.offset().top && scrollPos < (video.offset().top + videoHeight)) {
video.attr(‘src’, videoSrc + ‘&autoplay=1’);
videoPlay = true;
} else if (videoPlay && ((scrollPos + viewportHeight) < video.offset().top || scrollPos > (video.offset().top + videoHeight))) {
video.attr(‘src’, ”);
videoPlay = false;
}
}

$(window).scroll(function() {
scrollPos = $(window).scrollTop();
checkVideo();
});

preloadVideo();
checkVideo();
});

</script>

Try out the Divi theme:

Divi Supreme Modules Pro Plugin 10% Off:

Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6

Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1

 

Why Divi?

Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.

The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.

The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.

The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.

The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.

The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.

Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.

Latest YouTube Videos

Pin It on Pinterest

Share This