Pause background video when lightbox opens

Question

I have a page with a autoplaying background video. On this page, there is a link to open a video lightbox. I would like the background video to pause once the link to open the lightbox is clicked, but I can't seem to figure it out. I can get the background video to pause when I click it but not when I click the link for the lightbox. I am using fullpage.js and html5lightbox.

HTML:

<div class="section" id="section1" data-anchor="1stPage">
    <video autoplay loop muted id="bgVideo" >
    <source src="_media/web_intro.mp4" type="video/mp4">
    <source src="" type="video/ogg">
    </video>

    <div id="introText">
        <h1>Movie-style storytelling for business</h1>
        <h2>Here to save you from yet another deck</h2>
        <div id="box">
            <a href="_media/trailer.mp4" data-ogg="_media/trailer.theora.ogv" class="html5lightbox"><i>highlight reel</i></a>
        </div>
    </div>

</div>

SCRIPT:

$('#bgVideo').click(function(){this.paused?this.play():this.pause();});

What about `$('#box .html5lightbox').click(function(){this.paused?this.play():this.pause();});`? — Terry, Dec 15 '14 at 21:46
I would think that this would work, but I tried it and it didn't do anything. — dab417, Dec 15 '14 at 23:40

score 0 · Answer 1 · answered Dec 23 '14 at 16:57

Use delegation or add your code in the afterRender callback of fullPage.js as detailed in the docs:

afterRender()
This callback is fired just after the structure of the page is generated. This is the callback you want to use to initialize other plugins or fire any code which requires the document to be ready (as this plugin modifies the DOM to create the resulting structure).

Width delegation:

$(document).on('click', '#bgVideo', function(){
    this.paused?this.play():this.pause();
});

With the callback:

$('#fullpage').({
    //...  whatever options you have
    afterRender: function(){
        $('#bgVideo').click(function(){this.paused?this.play():this.pause();});
    }
})

Pause background video when lightbox opens

1 Answers1