Wrong behavior in YouTube video fullscreen mode

[saschask]

Hello,

I have several sections one below the other. My waypoint component is positioned right after the first section. One of the last sections contains an embedded YouTube video. When I load the page the waypoint component fires once

Object {currentPosition: "inside", previousPosition: undefined, event: null, waypointTop: 0, waypointBottom: 685…}

and when I scroll down to the mentioned YouTube section, it fires again

Object {currentPosition: "above", previousPosition: "inside", event: Event, waypointTop: -694, waypointBottom: -9…}

So far, so good.

When I play the embedded YouTube video and then switch to fullscreen mode (the latter is the important thing), then the waypoint component fires as if the user has scrolled up again

Object {currentPosition: "inside", previousPosition: "above", event: Event, waypointTop: 0, waypointBottom: 685…}

Once I left the fullscreen mode of the YouTube video again, another waypoint event is fired according to the current scroll position that we actually had all the time

Object {currentPosition: "above", previousPosition: "inside", event: Event, waypointTop: -3100, waypointBottom: -2415…}

In my case this wrongly fired waypoint event is quite critical since it starts/stops the autoplay of a main slider at the page top which changes the whole content below on slide change. For this reason I can see a YouTube video in fullscreen mode for only a few seconds until it's just gone/it has been replaced with new content.

Could you please try to fix the waypoint behavior in fullscreen mode?

Best Sascha

PS: Behavior found in Chrome (desktop and mobile)

[trotzig]

Interesting! I don't think we've considered full-screen behavior before. Could you post an example of the embed code you use here? It would help folks who want to reproduce the issue.

I don't have the bandwidth at the moment to take this on, so we'll have to ask for help from the community if we want to resolve this quickly. In the meantime, you could probably detect full-screen mode and just ignore the callbacks during that time. This might help: https://stackoverflow.com/questions/16755129/detect-fullscreen-mode

[saschask]

Yes, that's exactly the way I solved it for now.

onFullscreenchange() {
  if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  ) {
    this.setState({ fullscreenEnabled: true });
  }
  else {
    this.setState({ fullscreenEnabled: false });
  }
}

componentDidMount() {
  document.onfullscreenchange = this.onFullscreenchange.bind(this);
  document.onwebkitfullscreenchange = this.onFullscreenchange.bind(this);
  document.onmozfullscreenchange = this.onFullscreenchange.bind(this);
  document.onmsfullscreenchange = this.onFullscreenchange.bind(this);
}

The code I'm using for the video embedding is quite simple and based on the embed code snippet you get below each video on the YouTube platform. See: https://support.google.com/youtube/answer/171780?hl=en

The general structure of the page is also quite simple and as mentioned above based on several sections one below the other. The waypoint at the top and the YouTube video somewhere near the bottom so that you have to scroll a little bit to reach it.

Just scroll down, go into fullscreen mode and check the waypoint events/values all the time.

Thanks in advance for any solutions.