How to stop video when user clicks NEXT

i have the same issue. did you get a solution? would you be able to post some code?

Found the same issue after I’ve done a big quiz. Oh dear.

I solved this problem with some jQuery.

1. Embed the video and give the iframe a unique id (in my example below, it is myplayerid). e.g.

<iframe id="myplayerid" src="https://player.vimeo.com/video/146619957?api=1&player_id=vplayer1"
width="845" height="475"
frameborder="0" allowfullscreen="allowfullscreen"></iframe>

2. Create a .js file to include in your WordPress header.
Use the WP Pro Quiz id of your quiz.
In my example below, it is wpProQuiz_2

(function ($) {
    var iframe = $('#myplayerid')[0];
    var player = $f(iframe);

    $('#wpProQuiz_2 input[name="startQuiz"]').bind('click', function() {
        player.api('pause');
    });

})(jQuery);

Hope this helps.

Hi all! Here’s some addition to upper solution. It works even when all the questions have video embeded. It’s for YouTube. You don’t need to set id for every iframe, but you’ll have to enable api for every Youtube video (?enablejsapi=1).

jQuery(document).ready(function(){
    if(typeof wpProQuizReady === "function") {
        wpProQuizReady(function() {
            jQuery('.wpProQuiz_content#wpProQuiz_2').bind('changeQuestion', fixVideo); // wpProQuiz_2 — id of the test
        });
    }
});

function fixVideo() {
    jQuery(this).find('.wpProQuiz_listItem').each(function() {
        var iframe = jQuery(this).find('iframe');
        if(iframe.length) {
            iframe[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
        }
    });
}

Here is working example (Russian language, but it’s easy to understand what’s hoing on ??
Thanks for Tommyknocker for the code.
There are also some bugs still…
1) Videos don’t have preview pictures if you enable api
2) Videos don’t work on mobile Chrome (there can be other reasons for this issue)
3) You should use iframe instead of just pasting URL of the video into wordpress visual editor.

Thanks for feedback wattsyourwebsite
i have basic knowledge of coding but i can create a js file and understand the concept of header files. However, i just want to make sure i understand,
which file exactly is the word press header file? does it matter that i use a third party theme? (i use DMS) just to make sure, how do i reference the js file correctly in the header. I’m sure u can see how the other files are referenced but just thought i would double check.

I appreciate your feedback.

any one out there able to give me a step by step on this so i know what to place where? i appreciate the feedback.

Are you still needing help rob hartley.

thanks for the reply. yes, i still need help, just need a step by step on how to include the JS file in your WordPress header. I’m sure i can create the file, just not sure where to place it. i have some coding knowledge but basic.

Follow my steps 1) and 2).
For example if you create a file in your theme called

myscript.js

and pop the code from my step 2) into that file.
Then in your functions.php add this code:

function wpb_adding_scripts() {
    wp_register_script('froogaloop2_script', 'https://f.vimeocdn.com/js/froogaloop2.min.js', array('jquery'),'2', true);
    wp_enqueue_script('froogaloop2_script');
    wp_register_script('robhartley_script', get_stylesheet_directory_uri().'/myscript.js', array('jquery'),'1.0', true);
    wp_enqueue_script('robhartley_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Hope this helps!