"Video fullscreen" triggers change in layout

Responsive Responsive Layouts
,
1

Hello Hype Community,
I am quite new here and a huge fan of Hype and the possibilities through HTML5.

I am experiencing a problem with the responsive layouts when it comes to playing videos in fullscreen on mobile devices.

I have created two different layouts for portrait and landscape modes. It works like a charm. But when it comes to videos in fullscreen the layout changes when I turn the device from portrait to landscape and vice versa (which is totally understandable).

Now to my question: I totally suck when it comes to Javascript or Coding. That’s why: Do you guys know a script which prevents triggering the layout change when the video is playing?

I would be really grateful for that.

Here is my site btw - watch it on mobile devices to see the mistake on scene 2 -> https://www.audioillusionist.de

Thank you so much!

With best regards,
Mohan

2

If possible, please upload your hype document, and that will be much easy for others to help you.

3 
//on sceneload
if('layoutsRequestsHistory' in hypeDocument.customData == false ){
hypeDocument.customData.layoutsRequestsHistory = [];
}
hypeDocument.customData.layoutsRequestsHistory.push(hypeDocument.currentLayoutName());

 aVideoElement = hypeDocument.getElementById('itsID')

aVideoElement.addEventListener('fullscreenchange', function(e) {
    const state = document.fullScreenElement;
    const fullScreenToggleEvent= state ? 'FullscreenOn' : 'FullscreenOff';
   
switch(fullScreenToggleEvent){
case 'FullscreenOff' : 
hypeDocument.showLayoutNamed(hypeDocument.customData.layoutsRequestsHistory[hypeDocument.customData.layoutsRequestsHistory.length -2] );
break;

}


});

may work, did not test at all, just typed it in here …

But it’s got a chance to work :slight_smile:

1 Like