H5P Video - Wordpress Bootstrap-Modal

Submitted by nimzayx on Wed, 04/19/2017 - 21:28
Forums: 
General discussion

I'm using the h5p Wordpress plugin. I used the plugin to create an interactive video.

Then I take the h5p shortcode and include it in a bootstrap modal. The modal is hidden and only shows when I click on a button.

My problem is that when I close the modal the video keeps playing. Is there a way I can stop the video when the modal closes?

Thank you!

 

icc's picture

icc

Thu, 04/20/2017 - 09:41

Unfortunately, the H5P content isn't aware if its parent container is shown or hidden. Though it probably should be there's only one way to get around it. You'll have to figure out when the modal closes and then add the code to stop the video: 

document.querySelector('.h5p-iframe').contentWindow.H5P.instances[0].pause();

You can test the code from you browser's console(Ctrl+Shift+J in Chrome). Paste it and run it while the video is playing to see that it actually pauses the video.

nimzayx

Thu, 04/20/2017 - 15:51

Thank you so much! It's exactly what I needed!

Dotun

Mon, 07/09/2018 - 20:17

Hello, I have a similar issue as well but on a moodle instance. I've tried running the same code in my console just to test, but it isn't working.

otacke's picture

otacke

Tue, 07/10/2018 - 09:15

Hi Dotun!

I am sorry that you're running into trouble. Could you please share a little more information? If the community only knows that "it's not working", nobody will be able to help you.

Cheers,
Oliver