We built this Youtube video player to use in our virtual world Cryptovoxels. There are a few people asking about it in these forums so we made a playground so anyone here can use it. Its a port of CSS3DRenderer.js which was what three.js used.
@bnolan (founder of Cryptovoxels) also contributed to this code
Edit:
Old updates
New update
This is pretty fun 
You could use this to iframe anything, like the Babylon.js website for example https://playground.babylonjs.com/#1DX9UE#3
However, you can’t click on the iframe elements because the CSS objects are on a div that’s behind the canvas. You’d have to implement your own way of triggering items on the iframe
Could we not let the event bubbles in some ways ???
Maybe. I’d like to see if someone can get that happening. When I checked there was no easy way to pass a click to a div behind the canvas
Couple this with device orientation camera for more interasting results.
Amazing! 
I haven’t been able to get one of my scenes to work yet, but I hope to make it work.
So while looking for information I found examples where it is possible to have control over the video or the website:
http://jeromeetienne.github.io/threex.htmlmixer/examples/demo.html#instagram
I tried setting the CSS “pointer-events:none” on the canvas in @ozRocker demo, this CSS property is meant to “pass through” the clicks to the elements below, but it didn’t work for the iframe.
I thought it might be the case because of security concerns - you don’t want an evil website to put an iframe of some page (assuming a website mistakingly allows the page to be loaded from a frame) and then put a div on top of it, hiding what the user is really clicking, fooling the user into making evil actions.
But looking at the demo @Cstfan linked, it seems to me the only trick there is to set the pointer-events none on the canvas, and there it works fine. So, I guess there is no security concern, and I’m missing something here.
If any of you got the mouse clicks to pass to the iframe, please do share!
Tried exporting your playground to react without success. anyways I have refactored your playground to support HD resolution. And the fixed issue with multiple iframes
Very nice! It should work with React. The original code was actually built into a React application. I had to refactor to get it to work in the Babylon.js playground
@ozRocker - worked ok in Chrome - but not Firefox
Stay Safe, gryff
It work on my Firefox 74.0 on Windows 10. I manged to make it work on React too.
Awesome! If you have a demo pls post it up so we can have a play
Got it working with react + next.js. Spent 3 hours trying to debug why I was getting a blue screen and then realized it uses a zIndex of -1 which is why you have to clear the background. I gave mine a positive zIndex of 1 so it sits on top of the canvas instead of under it! This is pretty much required to get it to work if you are importing scenes/enviroment meshes since they will cover the transparent scene background.
The more you know. Awesome work on this by the way!
Ahh, putting it above the canvas means the touch events get eaten up by it. sigh. Okay so I’ll need to figure out how to pass down events. Got it!.
Just need to set container.pointerEvents = “none” and you’re good to go!
setupRenderer() {
let container = document.createElement('div')
container.id = 'css-container'
container.style.position = 'absolute'
container.style.width = '100%'
container.style.height = '100%'
container.style.zIndex = '10'
container.style.pointerEvents = "none"What was the final result? Did you get clicks to pass through? I’m hoping you have a playground link…
Here is the Code Sandbox Demo I made for playing youtube on Mesh.
Click on TV screen to play next Youtube Video. I am not rickrolling
Any suggestions/thoughts on passing in pointer events to the inline frame without setting zIndex to a higher number (i.e. in order to allow other WebGL elements obstruct the view of the iframe)?
You should be able to capture the pointer event properties (screenX,screenY) and then simulate the click manually on the underlying div.
I may misunderstand the implementation, but this has worked for me for stubborn (not css-solvable) “click through” problems on regular websites.
