Jump to content
Search Community

Changing video full screen mode to normal mode stops the video

BikashWaiba test
Moderator Tag

Recommended Posts

I'm having trouble with video embeds. When I switch from full screen mode back to normal mode, the video resets. I'm not sure if this problem is related to the ScrollTrigger refresh or if there's something else causing it. Is there a solution to ensure that the video continues playing seamlessly when transitioning from full screen mode to normal mode? As I was creating this demo, I discovered that the video will keep playing if it's placed in the first section.

See the Pen WNaEoXX by bikash_065 (@bikash_065) on CodePen

Link to comment
Share on other sites

ScrollTrigger.config({
    // default is "resize,visibilitychange,DOMContentLoaded,load" so we can remove "resize" from the list:
    autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
});

Disabling autoRefreshEvents on resize seems to work. 

 

 

Link to comment
Share on other sites

Hi @BikashWaiba and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

I strongly recommend you against disabling the refresh event in ScrollTrigger as this could open the door to many other issues. The main problem you're facing right now is the fact that the window's scroll position is being set to 0 when the video goes into fullscreen mode.

 

One way to solve this is to disable the ScrollTrigger instance when going into full screen and enable it back when leaving the full screen mode.

 

Another option, that seems a bit simpler IMHO is to use the full screen API to do that. What I mean by simpler is because using disable and enable means that all the pin-related changes are removed and then applied again by ScrollTrigger, leading to layout shifting. Also if you have more than one ScrollTrigger instance you'd have to disable/enable all of them in a loop using the ScrollTrigger.gretAll() method. The full screen API offers a promise when the video exits full screen mode:

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen

 

So you can tap into that to set the scroll position of the window object once that promise is resolved:

let currentScroll;

button.addEventListener("click", () => {
  // Store the current scroll position
  if (!currentScroll) {
    currentScroll = window.scrollY;
  }
  const isFullscreen = document.fullscreenElement || document.webkitFullscreenElement;
  if (isFullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen().
      then(() => {
        window.scrollTo(0, currentScroll);
        currentScroll = undefined;
      });
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  } else {
    if (container.requestFullscreen) {
      container.requestFullscreen();
    } else if (container.webkitRequestFullscreen) {
      container.webkitRequestFullscreen();
    }
  }
});

Here is a fork of your codepen:

See the Pen bGmrrEX by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...