YouTube video player interaction problem

Questions
,
1

I am programming a virtual exhibition and we have YouTube videos on virtual screens. I could manage it programmatically but user interaction is a problem.

  • The canvas must have z-index higher than css3d content, so that it does not leak through solids in GL.
  • But this time the mouse/touch vb interactions are cut by the higher GL layer.

What I am thinking is to put some data into meshes, raycast and use the data to start/stop the media from JS. I could also model an external control panel.
These just do not seem right…

Does anyone know a better way?

2

On http://threeml.org/ I have several examples where the Html content within a css3d can be accessed (including some YouTube content).

The trick is to set the pointer-events: none; css to the canvas (or a parent of the canvas). This will still allow raycasting functionality, but also allow the css3d content to be active, because this content is normally created outside the element having the’ pointer event: none’.

An alternative would be to only activate the above style on a mouseover event on the css3d content (it seems that for example the often used OrbitControls stops working)

1 Like
3

Yes, I already experimented with the pointer-events: none method, but as you mentioned I’ve got problems with my controls…
Let me try the mouseover method now.
Thank you for the suggestion…

4

I could handle it with mouseover but it does not fit my requirements.

  • Touch interfaces will be problematic
  • I wanted full control on the player: Handle state changes, handle cursor, I don’t want someone watch unrelated suggested videos etc.
  • I also had another raycaster: When someone clicks a panel, the controller “walks” to it, that would be impossible if iframe internals could be clickable.

So, I implemented my initial idea (use of userData on meshes) for now. Play & pause controls + when video finishes it rewinds to the start. This way one cannot click suggested videos etc - they are shown on pause thou.

There is a lot more work to be done, but one can examine the current state here (please prefer PC):
https://arabacilarmeydani.adalarmuzesi.org/