Embedded h5p interactive video makes text below it flicker on Chrome browsers

Submitted by jonma on Sat, 05/25/2024 - 01:28
Forums: 
Bugs in content types

I use H5P interactive videos in an online course hosted on edge.edX.  I have encountered a bug in this summer's course run where pages with embedded H5P videos on Chrome render any text below the video (and only below) with a strange flickering that makes the text nearly unreadable.  We've used the same content on edX for many years with no issues. We also have none-H5P embedded video content that does not cause any issues.

The intensity of the flickering is variable (from annoying to unreadable) and it only affects Chrome (and Chromium based browsers like Edge).  I have reproduced the bug with the latest version of Chrome on my device (Version 125.0.6422.61 - Windows 11-64-bit).  In Firefox, the text flickers briefly when the page loads but then the flickering stops and there is no further issue.  Safari seems to be unaffected according to Mac users in my class.  

I've attached an example of an H5P file that causes the issue. You can also enroll in our OER version of the course below and see the bug in action (for example:Week 01/R01: Week 1 Concepts/Time, velocity and speed page).

OER course link: https://learning.edge.edx.org/course/course-v1:UBCx+PHYS100+open/home

H5P file: 
Binary Data track-62197.h5p
Summary: 
Interactive video makes text below it flicker on Chrome browsers
Content types: 
Interactive Video
otacke's picture

otacke

Sat, 05/25/2024 - 12:46

Hi Jonma!

First of all: You are (mis)using h5p.org as storage for the course. h5p.org is meant for testing H5P, not for hosting content in production.

The problem that you are encountering is not a bug in Interactive Video, but an issue with the site or how it's used to use H5P. You are putting the H5P iframe into another iframe, the outer one pointing to (https://edge.edx.org/xblock/block-v1:UBCx+PHYS100+open+type@vertical+block@c7807332a1de4be69019d2318b84c5a6?exam_access=&format=Weekly%20Reading%20Assignments&recheck_access=1&show_bookmark=0&show_title=0&view=student_view). This causes trouble with resizing the H5P iframe, cmp. https://snordian.de/2023/09/30/what-is-it-with-h5p-and-this-resizing/. Looks like two different resizing mechanisms are fighting against one another and the H5P content constantly resizes as a consequence.

Best,
Oliver