Full screen video issue

[Vitaliy Leonov]

When i trying to open full screen video from pinned panel it's immediately closing. After some debugging i found that it happens because of scroll reseting to 0 for a moment. Could you help me? please

See the Pen VwjoyPW by Crisponski (@Crisponski) on CodePen

[ZachSaucier]

Hey Vitaliy and welcome to the GreenSock forums.

 

This same issue was brought up before: 

 

The work around is to move the video (in your case the iframe) from within the pinned element to somewhere outside of it for the duration of the fullscreen event. Applied to your situation it'd be something like this:

See the Pen VwjoXXe?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It might also help to use the YouTube API to detect when the buttons are clicked and get the play state.

[ZachSaucier]

Another alternative would be to use the soon-to-be-documented autoRefreshEvents. This lets you continue playing the video through the transition without additional work:

See the Pen RwRXMzV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But again to do so you'd either need to use a custom UI or use the actual YouTube API to hook into the fullscreen click.

[GreenSock]

I added some code to the next release that'll skip the resize refresh if document.fullscreenElement is defined which should resolve this. You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

[Paver]

On 12/9/2020 at 10:08 PM, GreenSock said:

I added some code to the next release that'll skip the resize refresh if document.fullscreenElement is defined which should resolve this. You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Hi @GreenSock, I know this is an old thread but is it possible to also skip the resize refresh if document.webkitFullscreenElement is defined? Safari still doesn't support the non-prefixed version: https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenElement#browser_compatibility.

 

I'm having the fullscreen video (inside a pinned section) closing again straight after going into fullscreen mode on Safari. The workaround from @ZachSaucier doesn't really work for me as I can't add my own fullscreen button and have various embedded players with their own controls that could be used in the section.

 

I've tried listening to the 'webkitfullscreenchange' event to potentially unbind the resize event from there but it's firing too late (after the resize event). The only ugly looking solution I have currently is to bind my own resize event before requiring GSAP and manually updating document.fullscreenElement based on document.webkitFullscreenElement:

 

window.addEventListener('resize', () => {
    if (document.webkitFullscreenElement && !document.fullscreenElement) {
        document.fullscreenElement = document.webkitFullscreenElement;
    }

    if (!document.webkitFullscreenElement && document.fullscreenElement) {
        document.fullscreenElement = null;
    }
});

 

[GreenSock]

I can add that to the next release but in the meantime you can simply tell ScrollTrigger not to call .refresh() on resize events using the config() method: 

 

ScrollTrigger.config({
  autoRefreshEvents: "DOMContentLoaded,load,visibilitychange" // omit resize
});

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

Then you can set up your own resize handler and decide if/when you want to call ScrollTrigger.refresh(). 

[Paver]

Thanks Jack, much appreciated and a much better work around in the meantime!

 

For anyone else needing the workaround, the following handler should retain the default resize functionality with the additional check for Safari:

window.addEventListener('resize', function () {
  if (!document.webkitFullscreenElement) {
    ScrollTrigger.refresh(true);
  }
});