Develop Reference

How to recreate youtube full screen videos with scrolling

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.

Fullscreen embedded YouTube videos are off centered on Chrome. Possible CSS or JS conflicts?

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.

Chrome Extension - Show custom notification/popup (HTML element) on top of a fullscreen video

I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.

I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.

requestFullscreen for multiple elements

So imagine that you're using an HTML5 video player library such as Videojs. You want to extend this library's functionality by adding an extra button, but for reasons not relevant to this question, you don't want to get into that whole plugin coding business, so you just stick the player inside a container and add an absolutely positioned button, such as:
<div class="player-container">
<video class="video-js"></video>
<button type="button" class="absolutely-positioned"></button>
</div>
The problem is that at some point you might click on the fullscreen button of the player and this will call requestFullscreen on the video element and the video element only. This means that your button or anything else on that container won't be on fullscreen mode.
On webkit browsers you can make the other elements remain visible on fullscreen by setting a z-index equal or higher to that of the video element on fullscreen mode. On Firefox the element needs to be changed to position: fixed (but you can't use the -moz-full-screen prefix to style it, because the element is not recognized as being on fullscreen mode) and on IE it's simply not visible.
I'm trying to find out whether fullscreen mode is restricted to a single element (and it's children) or if it's possible to have multiple fullscreen elements at once. Has anyone else struggled with something similar? Are there any workarounds?

I seem to have found the solution after inspecting Wikipedia's new image viewer (which displays buttons after becoming full-screen). The z-index does play a role, but the trick seems to be to call requestFullscreen on a container element encompassing your media as well as its custom control elements.

I have similar problem, but external library call requestFullscreen() for one of its elements which has id. In that case I just
document.getElementById('#libElementId').appendChild(myElement)

three.js - Help adding pinch zoom to css3d_youtube demo - trackball controls messing up camera position

I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing

Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.