How Youtube's “scroll for details” feature works?

Question

Youtube has rolled out the new feature - ability to scroll a page while watching a video in full-screen mode(sreen is below).

I have a html5 player on my website and want to implement the same scrolling in full screen mode.

At this moment I have no idea how Youtube did that. Could anybody explain it to me?

Answer 1

What appears to be happening is that the element becoming fullscreen is actually a wrapper around the video player, comments, etc. Youtube changes the player to the theater version and fits it to fill the screen, but scrolling reveals the rest of the content that was made full screen as well.

I found this fiddle showing a fullscreen demo, and I added on to it to sort of show the concept: http://jsfiddle.net/krtw58z0/

requestFullScreen gets called on the wrapping element. The dummy 'video player' can be styled however we please (I set width up to 100% when fullscreen), and you can still scroll to view the other child elements.

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