1. HOT Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
HOT Divi Login Customizer Plugin - White-label your Wordpress login page for your Divi site.
View premade login page design
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Pause Divi section background video

Discussion in 'Free Divi Community Forum' started by Dave E, Jun 30, 2020.

  1. Dave E

    Dave E New Member

    I'd like to this section background video to play only when mouse is on top of it, but when you move the mouse out of the video, it will automatically pause, and resume again when the mouse is back on it.

    I've tried inserting the following code into Divi Theme Options > Integrations > Add code to the < head > of your blog...but it doesn't seem to work. Any help would be much appreciated!

    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery(".et_pb_section_video_bg").hover( hoverVideo, hideVideo );
    function hoverVideo(e) {
    jQuery('video', this).get(0).play();
    }
    function hideVideo(e) {
    jQuery('video', this).get(0).pause();
    }
    });
    </script>
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  2. Problemizer.com

    Problemizer.com Divi Expert

    Please insert this code in the same place. Remove the code you added first.
    <script>
    window.onload = function() {
    let videoBg = document.getElementsByClassName('mejs-mediaelement')[0].firstElementChild.firstElementChild;
    let bg = document.getElementsByClassName('et_pb_section_video')[0];
    videoBg.pause();
    bg.addEventListener('mouseover', function() {
    videoBg.play();
    });

    bg.addEventListener('mouseleave', function() {
    videoBg.pause();
    });
    }
    </script>
     
    Marcus Andersson likes this.
  3. Eric Cousins

    Eric Cousins New Member

    so this code snippet is close to what I'm looking for. Instead what I need to do is have my section background video pause when a popup is triggered. I have this jquery script to auto play and auto close a video within a popup

    <script>

    jQuery(document).ready(function ($) {
    homeVideoElement1 = $("#divi-video-container1 video")[0];
    homeVideoElement2 = $("#divi-video-container2 video")[0];
    DiviArea.addAction('show_area', function(area) {
    if (area.hasId('sim-intro')) {
    homeVideoElement1.play();
    }
    if (area.hasId('libraryintro')) {
    homeVideoElement2.play();
    }
    // console.log('im open');
    });

    $('video').on('ended',function(){
    //console.log('Video has ended!');
    $('a.da-close').trigger('click');
    });
    });

    </script>

    could you help me figure out how to incorporate pausing a section background video when my code is triggered?

    Thank you
    Eric
     
    Marcus Andersson likes this.
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  4. Problemizer.com

    Problemizer.com Divi Expert

    Hello Eric,

    Sorry for the late response.

    Did you find the solution to the issue?

    If not, please share the link to your website and explain what is needed tp reproduce the issue.
     
  5. Eric Cousins

    Eric Cousins New Member

    sure the page is simthology.com/home

    you will see the video background and the first 2 circular regions are links to popup videos... now on accident the page appears to be working correctly. the first snippet that's in your reply there handles auto start for the video and auto close popup at the end of the video

    what i did was drop the snippet that you wrote in this thread in which pauses the background based on mouse hover... so I'm guessing that having the popup open is also triggering it because that changes how the code sees where the mouse is. this isn't ideal. what i would like is to figure out the line or 2 of code needed to pause the background video if the code was placed inside the if (area.hasId('sim-intro')) statement so when the video in the popup is triggered to play the background is triggered to pause.. also i would probably need a line of code to play the background inside the code that triggers the auto close popup.
     
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  6. Marcus Andersson

    Marcus Andersson New Member

    Hi,
    Is it possible to add a function so the video don't autoplay?

    Jakob Jerlström | Level Designer (jerlstrom.se)
     
  7. Marcus Andersson

    Marcus Andersson New Member


    Hi,
    Is it possible to add a function so the video don't autoplay?

    Jakob Jerlström | Level Designer (jerlstrom.se)
     
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

  9. Marcus Andersson

    Marcus Andersson New Member


    hey!

    i added it, but now nothing works :D
    it does not play/pause on hover.

    Br Marcus
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    My bad. What about this:
    Code:
    Log In or Sign Up to view this code.
     
  11. Marcus Andersson

    Marcus Andersson New Member

    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Digital Marketing' Divi layout for all Pro members:View Demo