Cannot fullscreen a YouTube video in a section with scrollOverflow

[rredfearn32]

Description

If you have a YouTube video embedded within a section which has scrollOverflow enabled and content of a sufficient length to make it scrollable, the video cannot be made fullscreen. When you try, the fullscreen video flashes up briefly, but then returns to normal size.

Link to isolated reproduction with no external CSS / JS

http://jsfiddle.net/rredfearn32/xdw4j8xg/

Steps to reproduce it

1. Scroll to video
2. Play video, then click the fullscreen button
3. Video fails to appear fullscreen

Versions

Desktop issue.
Present on most common browsers (Chrome, Firefox, Safari, IE) and OS's (Windows, OSx, Ubuntu)

[rredfearn32]

Issue also occurs with other iframe-based video players (JWPlayer, etc)

[meskimeski]

Same problem!
The websites start to scrolling when you click to fullscreen mode
http://kitchirigami.com/#projects
click -> more info and try to open in fullscreen mode

[meskimeski]

So guys any suggestions? I find somewhere in the StackOverflow post - where the guy writes :

found a solution : in fullpage is a function called scrollPage(). If a video is loaded, stop the function.

But i don't really understand how can i do it ?

[alvarotrigo]

He might be refereeing to setAllowScrolling(false)

[meskimeski]

nope, the first his message was:

im using fullscreen.js for a project. if u come to a certain slide, say slide 3 / section 2, there is a video player, which u can switch to fullscreen. but if u do that, fp seems to refresh the whole page: it moves from first section back to slide 3 / section 2. after that, the video is in fullscreen mode. the same if you cancle fullscreen mode.Is there a way to avoid that behavior in fullpage? something like $.fn.fullpage.setAllowScrolling(false);

Then he add an aswer:

found a solution : in fullpage is a function called scrollPage(). If a video is loaded, stop the function

I tried to use setAllowScrolling(false); but its not helps

[zebulah]

We're running up against this issue with a Vimeo iframe. Has anybody made any progress on ameliorating the problem?

[zebulah]

FWIW, we see the same problem with the non-iFrame native video players in all browsers.

[zebulah]

Ok. We got this working. We need to do more testing before hanging up the Victory banner, but here's the change that made it work:

• We conditionalized the execution of the "resizeHandler" function in fullpage.js. If anything is in fullscreen mode the function ends without doing its thing.

• Here is the condition we used (if this is true we stop the rest of the function):
  (
  document.fullscreenElement ||
  document.webkitFullscreenElement ||
  document.mozFullScreenElement ||
  document.msFullscreenElement
  )

• FYI: If any of the items above are not null, something is full screen.

• If anyone needs the exact code, I'm happy to share it.

We'll be further testing this today, if we see any issues with it we'll post again.

I hope this helps out!

@alvarotrigo You may want to consider including this change in an update.

[alvarotrigo]

@alvarotrigo You may want to consider including this change in an update.

Sure! Feel free to create a Pull Request explaining the issue it solves and how it works.

[carlorizzante]

Hello!
I am encountering a similar issue. I tried to apply the solution suggested by @zebulah with no success.

In my current case YouTube embedded iframes won't go fullscreen if placed within the FullPageJS markup. They may flick and leave the page full black, the video won't play. It seems a bit unpredictable what the result would be, sometimes nothing really happens, the fullscreen video flicks and then disappear.

Outside FullPageJS, in other pages, they work as usual, just fine.

ps. The issue seems to be present only on Chrome and Safari. Firefox so far plays along fairly well.

[alvarotrigo]

@carlorizzante working as expected on this demo. See the 2nd section: https://jsfiddle.net/5yLsdwmt/20/

[carlorizzante]

Thanks for the prompt reply, @alvarotrigo, I finally managed to make it work on Chrome and Safari. The issue seemed to be related to some absolute positioning of the background on the slides, so unlikely related to FullPageJS.

Thanks for a great piece of code by the way :)

[e-anima]

@ alvarotrigo
It does not scroll when my mouse is over the video player. Does it with you?

[alvarotrigo]

@e-anima please search with the keyword "video" on the forum. There's nothing new I have to say about it.

[alvarotrigo]

Fixed in v4! 👍