Hi I was curious how the fullscreen with scrolling works on a youtube page.
Normally when you put a video in fullscreen there is no scrolling. But for youtube they are able to make the video fullscreen (and by extension the browser) and still allow a user to scroll down the page.
I have a feeling they are doing some sort of trick and "highjacking" the fullscreen function and triggering the video to go into theatre mode.
Not sure where to start at all for the code.
YouTube just makes the whole html element full screen and changes the height and width of the video element to 100% of the height and width of the viewport.
Related
I have a responsive website WebsiteA, and I'm opening another responsive WebsiteB using an iframe.
I needed to make the iframe responsive as well (to take the full width and height of it's container div), so I did that with absolute positioning.
This is working fine in the browser, I can resize the screen and the iframe is behaving in a responsive manner, and I'm still able to interact with WebsiteB inside the iframe normally, like clicking the links, buttons ...etc
But once I use a device emulator (in chrome dev tools), or use an actual touch device (mobile, tablet), when I try to touch any of the controls (links, buttons ...etc) in the iframe (WebsiteB), then it seems that the touch events are being received at the wrong location, Therefore event handlers are not working.
Has anybody encountered this issue?
Calling requestFullscreen() method on video element does the job. Video goes fullscreen and also rotates to landscape in mobile browsers.
However calling this method on div element which is parent to my video element makes it fullscreen but does not rotate it to landscape when in portrait mode.
How can i rotate the whole div element to landscape?
Have you styled your containing DIV to look differently in different orientation and when it is full screen? I'm guessing that is what you are missing.
Take a look at styling items for :fullscreen and media queries.
https://tympanus.net/codrops/css_reference/fullscreen/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
For those that might experience the same issue:
the solution is to use the screen.orientation API's.
example:
when you call requestFullScreen you can apply the screen orientation in the following way...
element.requestFullscreen();
screen.orientation.lock("landscape-primary");
when on mobile the default screen.orientation.type == "portrait-primary", you can change it to "landscape-primary" with your video element custom controls or any element you wish to toggle fullscreen and change screen orientation on mobile
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?
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
Using AMP version 2.0.0, default skin.
I'm trying to play a 1:1 aspect ratio video from my media services account in Azure media player. Doing this using 800/500px width/height caused the video to extend well below the height of the modal window it is playing in. I fixed this issue by setting the height of the video to 500px and the width to auto (when non-fullscreen). This setting works for both 16:9 and 1:1 aspect ratio (it's not ideal, but it does work).
When I fullscreen the video, the width and height are set to 100%, and so half of the video is lost. I would like the video to play with height max and black letterboxing at the sides, as it does in WMP. If I could get the same effect when playing in non-fullscreen that would also be good. If I set the video height to anything other than 100% when the player is fullscreen it just moves the playbar up the screen rather than resizing the video. Anyone have any advice on how to get this working?
As a last resort I would also accept not being able to set the video to fullscreen, but I can't find documentation on how to do that either.
Issue here was a rogue css rule setting the height of all s to 100%
I embed a lot of YouTube videos on my blog. When you go fullscreen with a video in Chrome, the video appears off centered (vertically). The black area is fullscreen, but the video itself is off centered and the bottom gets cut off.
I am wondering if I could have a JS or CSS conflict, but I am struggling to figure it out. Does anyone have any thoughts?
Example: http://filmfed.com/blog/2016-moana-trailer
It works fine in other browsers.
If I disable my CSS, it works fine, so I am guessing it is a CSS conflict of some kind.
There's a will-change property on the outer-container div element that seems to be doing that.
Open a page that has a video, but before playing it and setting it to full screen, press F12 to open the Dev Tools on Chrome, go to the console tab, and paste this in:
document.getElementsByClassName("outer-container")[0].style.willChange = "inherit";
Then try playing the video full screen. So I think you should find a way to remove that will-change property, or change it to inherit.