YouTube video turns completely black when loaded into the H5P Interactive Video

Hi H5P Community,

I am facing an issue where a YouTube video turns completely black when loaded into the H5P Interactive Video tool (both in Moodle Content Bank and on H5P.org). The player controls appear, but the video content does not display or play.

Details & Configuration:

  • Content Type: Interactive Video

  • Platform: Moodle (also tested/reproduced on H5P.org)

  • YouTube Video Link: [https://youtu.be/PSltG6GuO74](https://youtu.be/PSltG6GuO74)

Settings Checked on YouTube Studio:

  1. Allow Embedding: Enabled ([x] Izinkan penyematan)

  2. Visibility: Public (Publik)

  3. Audience: Set to Not Made for Kids ((x) Tidak, video ini tidak Dibuat untuk Anak-Anak)

  4. Age Restriction: None (No restriction)

Despite all YouTube permissions being set correctly for third-party embedding, the video stream remains black inside the H5P player frame.

Could this be related to a recent YouTube IFrame Player API policy update, or is there a specific header/referrer requirement in H5P that might be causing this? Any guidance or troubleshooting steps would be greatly appreciated.

Thank you!

Content types: 
BV52's picture

Hi,

If you are still encountering this issue and you are self-hosting your contents please make sure that you are using the latest version of Interactive Video.

On the other hand if you are hosting your contents in H5P.com please provide the URL of the content so that we can check.

-BV

Hi, even the example at https://h5p.org/interactive-video#example=27611 turns black as well.

BV52's picture

Hi,

The sample content on H5P.org uses an older version and cannot be updated anymore as it is using an outdated version of the plugin. This is not a problem when the same content is viewed in H5P.com which is using the latest version of Interactive Video.

https://bv-demo.h5p.com/content/1292993777505347329

-BV

I have fixed this on my setup.

The problem is in the H5P.Video module that is used by interactive video and course presentation for videos.

I had H5P.Video 1.6.76

and the javascript is using code that dosnt work anymore

I couild not find any way to update the H5P.Video module so i used chatgpt to create a update package to H5P.Video 1.6.80 from github

It changes this code in the javascript from

player.g.style

to

player.getIframe().style = "position:absolute;top:0;left:0;width:100%;height:100%;";

 

The demo site and example you linking to is using H5P.Video 1.6.80, thats why it works.

If everyone could update to 1.6.80 all youtube problems would be solved

We tried upgrading moodle and h5p and no change
All our videos are loaded from YouTube using Video Interactive content type are blank black screen but the audio is working.
Running
Moodle 4.5.13
mod_hvp 1.28.3
mod_interactivevideo 1.9.4
php 8.2

otacke's picture

You need to upgrade your content type libraries.

I think it's been updated in the h5p hub after I posted my comment. I don't have Moodle so I'm not sure about version number. I tested on my test server and it updated 1.6.79 h5p video when I updated the library and now it works.

Think you can find help for Moodle specific to this problem here

https://moodle.org/mod/forum/discuss.php?d=482329&parent=1909904