4

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? enter image description here

asked Nov 17, 2018 at 7:58

1 Answer 1

8

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

answered Nov 17, 2018 at 9:47
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.