HTML5 Video Not Pausing

Question

I am working on a iPad HTML app that has two videos in it. The HTML code is loaded dynamically. The page has two videos with text corresponding to them. The videos also have just two controls. Play and Pause. However the issue I am having is the Video will only pause when the other is playing. Basically in my if / else statement the else is not being called at all. Here is my code. Anyone know why it won't pause when trying to click on the overlay again? Thank you in advance!

$('div[class*="video-overlay"]').bind('mousedown', function() {

    var video       = $(this).next('video')[0];
    var text        = $(this).attr('data-play');

    if (video.paused) {

        video.play();

        $('p').addClass('fade');
        $('#' + text).removeClass('fade');

        $(this).removeClass('overlay');
        $('div[class*="video-overlay"]').not(this).addClass('overlay');

        $(this).children().removeClass('video-play');

        $('video').not($(this).next(el)).get(0).pause();

        $('.play').not($(this).children()).addClass('video-play');

        $(video).on('ended', function() {
            $(this).prev('div').children().addClass('video-play');
            video.pause();
        });

    } else {

        video.pause();
        console.log('Hey mom, I paused all by myself!');
    }

});

Answer 1

Without your html, I can't be sure, so I can only guess.

var video       = $(this).next('video')[0];

change this line to

var video       = $(this).find('video')[0];

To get a more definite answer, please provide your html code.

Answer 2

It was actually in my CSS. I didn't have the overlay in front of the video. So I changed the z-index to a higher value and the fixed it. I had the play button in front so it was playing the video, just not the overlay. Doh!