Fullscreen and Control Bar Issues in Student View for Interactive Video H5P Component

[nihxdr]

Steps to reproduce:

• add an interactive video h5p component from the studio and publish
• click on Live preview version
• now attempt to make the video fullscreen
• then exit the fullscreen mode and again make the video fullscreen

Observed behaviour: the video only takes up about 150px of height from the top in the first attempt to make video fullscreen, whereas in the second attempt the video takes up fullscreen but now we have lost the video controls at the bottom

screenshot:

Expected behaviour: video goes to fullscreen in the first attempt itself also making the video controls available at the bottom

tutor version: 15.3.8 chrome version: Version 115.0.5790.102 (Official Build) (64-bit)

---

i guess the issue is with applying some styling in xblock, i tried out the h5p-standalone, it didn't have such issues.

I'm new to xblock development, so if anyone can guide me or provide some lead on how to resolve this issue it would be helpful

[nihxdr]

@ziafazal @Cup0fCoffee, can you please look into this issue?

[Cup0fCoffee]

@nihxdr I'm not an active maintainer of this repo. If I do find some time, I'll take a deeper look.

click on Live preview version

Does it behave the same on "Live" as on the "Preview"?

I'm new to xblock development, so if anyone can guide me or provide some lead on how to resolve this issue it would be helpful

I would start with inspecting the styles in the browser and try to see which css file contains the rules that influence the height. In regards to what part of XBlock is rendering it for the learners, I think it would be student_view function. You can see what html, css and js files it adds.

Also, I would check if the issue has anything to do with the contents being rendered within an iframe, since iframes can often behave weirdly due to sandboxing. You might need to add something like allow="fullscreen" attribute to the iframe.

Hope this helps.

[ziafazal]

@nihxdr Let me try to reproduce it for me. Which H5P video content you are using?

[nihxdr]

@Cup0fCoffee

Does it behave the same on "Live" as on the "Preview"?

Sorry, I just meant "View Live Version" button, but yeah its the same in both "View Live Version" and "Preview"

I would start with inspecting the styles in the browser and try to see which css file contains the rules that influence the height. In regards to what part of XBlock is rendering it for the learners, I think it would be student_view function. You can see what html, css and js files it adds.

I have looked into it, and haven't found any issues as of now, but i have found something while inspecting the styles in the browser

• the styles that gets applied to the h5p component when i click the fullscreen button is different in the 1st attempt from the subsequent attempts
• in the first attempt for fullscreen, height is not being set in the iframe, but a class named h5p-fullscreen is being applied to its parent div, whereas in the second attempt(and also following attempts) the height is directly being set on the iframe

---

so from this i suspect the issue might be because of how the styling is applied here, (I'm not sure)

Thanks for your time!

[nihxdr]

@ziafazal I'm facing the issue with every "interactive video" type h5p components, in my case i was testing with this

Looking forward for your reply!

[nihxdr]

@ziafazal sorry to bother you, any updates on this issue?

[ziafazal]

@ziafazal sorry to bother you, any updates on this issue?

@nihxdr I'm working on it and hopefully push a fix in a day or two.