How Youtube's “scroll for details” feature works?
up vote
0
down vote
favorite
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?
javascript html5
asked 11 hours ago
Roman Roman
758
add a comment |
up vote
0
down vote
favorite
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?
javascript html5
asked 11 hours ago
Roman Roman
758
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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?
javascript html5
asked 11 hours ago
Roman Roman
758
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?
javascript html5
javascript html5
asked 11 hours ago
Roman Roman
758
asked 11 hours ago
Roman Roman
758
asked 11 hours ago
Roman Roman
758
asked 11 hours ago
Roman Roman
758
asked 11 hours ago
Roman Roman
758
758
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
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 9 hours ago
csp713
33716
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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 9 hours ago
csp713
33716
add a comment |
up vote
2
down vote
accepted
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 9 hours ago
csp713
33716
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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 9 hours ago
csp713
33716
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 9 hours ago
csp713
33716
answered 9 hours ago
csp713
33716
answered 9 hours ago
csp713
33716
answered 9 hours ago
csp713
33716
33716
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53349361%2fhow-youtubes-scroll-for-details-feature-works%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
