How to disable going fullscreen of embedded videos

Submitted by motovio on Thu, 11/02/2017 - 21:15
Forums: 
Bugs in content types

Dear community, 

As I would like to integrate H5P in an mobile app using the Ionic Framework (which relies on HTML5 and javascript) I need to know the following thing:

Embeding the video with the iframe-tags works fine. But at least on my iPhone 7 (with latest iOS) it always triggers the video to go to full screen mode. May this be related to using a youtube video? Or might it be due to the fact of the "allowfullscreen"-attribute in the iframe-tag? If yes, what do I need to type in there, to prevent going fullscreen?

 

Thank you very much for your help.

Best Regards,

Dominic

Summary: 
Preventing fullscreen mode
thomasmars's picture

thomasmars

Fri, 11/03/2017 - 13:07

Hi,

Is the video you are referring to a "Interactive Video" H5P ? and does this happen immediately when you enter the page with the H5P, or when you actually press "play" on the video ?

Interactive Video has a feature which automatically toggles full screen if the device height or width is smaller than 640pixels, because if the video is this small it is usually too small to see without it being in full screen. Is this what you're experiencing and would you rather that the video does not trigger fullscreen automatically ?

Best regards,
Thomas

motovio

Sun, 11/05/2017 - 18:46

Hi Thomas,

 

thank you very much for your reply! Basically yes, I'm refering to the "Interactive Video" in H5P. This only happens, whenever I start the video, since I did not have it set to autoplay. 

 

And I experience it as you have mentioned it. The fullscreen automatically gets triggered, which should not be the case. Even after setting height and width to 650px, it still happened. 

Is there anything I might have missed? 

thomasmars's picture

thomasmars

Mon, 11/06/2017 - 13:59

Yeah, it checks the height and width of your device, not the container width in pixels, which is why it always happens. This is supposed to be a feature of Interactive Video for users with small devices, I'm sorry you're experiencing it as a bug.

Can you give some contexts that would explain why you would not want the Interactive Video to expand into full-screen on small devices ? I think many video providers has this functionality.

bez.lashkari

Tue, 02/05/2019 - 09:00

Hi,

I'm having the same issue. My scenario is that I would like to encourage users to turn their mobile devices into landscape mode when doing the H5P interactions.  I have a popup to trigger when they press play in portrait but the video just goes into fullscreen mode instead.

How can I disable this feature?

Thanks

BV52's picture

BV52

Wed, 02/06/2019 - 04:08

Hi bez.lashkari,

I'm afraid disabling the feature is not possible not unless you make changes to the code.

-BV52

bez.lashkari

Thu, 02/07/2019 - 06:38

Thanks for your reply.  Now I'm wondering the opposite :-)

Can I enforce fullscreen for portrait orientation on mobile devices?

Thanks

AleScand

Thu, 07/23/2020 - 18:06

Hello,
I suppose that this is the code portion to edit (I'd like to disable automatic fullscreen in play and/or automatic pause exiting fullscreen):
https://github.com/h5p/h5p-interactive-video/blob/master/src/scripts/interactive-video.js#L449-L45

But I can't find "interactive-video.js" in my local Moodle server. So how can I edit this behaviour... perhaps via h5p-mod?
Could you please give an example?

Thank you very much!

bez.lashkari

Mon, 02/11/2019 - 12:54

Hi,

 

Sorry I meant how do I go about enforcing fullscreen on landscape for a play event?

Thanks

BV52's picture

BV52

Tue, 02/12/2019 - 03:20

Hi bez.lashkari,

This is not possible but this is a great idea. I suggest you post this in the Feature Request forum. In order for your feature request to attract as much interest as possible make sure it follows the below guidelines:

 

  1. It is clear from every perspective how the feature will work. We recommend describing the feature with one or more user stories, for instance “As an author I want it to be possible to pick between different effects for the check answer animation so that the learners will see a variety of effects and also I can adapt the effects to my target audience(I’ll be using pink unicorns which works really well for both my target audience which are 4 year old girls and venture capitalists)”

  2. If the feature can be illustrated with images or videos it always helps

  3. Make it clear what content types this is relevant for, and or if this is a new content type

 

Make sure you post the feature in the Feature Request forum.

 

-BV52

 

bez.lashkari

Tue, 02/12/2019 - 05:01

Hi,

Are you sure it's not possible?

I have H5P setup on a Drupal site and am using the hook_h5p_scripts_alter to insert my own JS functionality.  Is it not possible to do something like:

if (state.data === 1) {
   $(video.parent.$container).toggleFullScreen(); // .toggleFullScreen() being an existing H5P function
}

Youngdeok

Sat, 06/01/2019 - 15:02

Hi.

I found new version of 'Interactive Video' has auto full screen feature when I see it on mobile devices.
The previous version of Interactive Video was ok. It didn't have auto full screen feature.

Clicking center of the video thumb can play the video as embedded screen.
But, If I click play button on H5P player, It's going to full screen.

It's very annoying because I want to see the video and comments at the same time.
I used css with float iframe for the video in order to see comment area. However, playing video is only available at the full screen mode like iphone does.

I want to disable this feature.
Could you give me the idea where do I have to change the code in the Interactive Video H5P source?

 

 

AleScand

Mon, 07/27/2020 - 12:01

Hello, I'd like to ask the same question.
I need to edit "interactive-video.js" but I can't find this file in my local installation of Moodle. 
There's a way to edit the behaviour on lines 450-453?
 https://github.com/h5p/h5p-interactive-video/blob/master/src/scripts/interactive-video.js#L450-L453

Thanks