YouTube Playback (using CSS3DRenderer.js) Breaks Upon Entering VR

Hi there,

I am new to babylon.js and the forum. Some of my friends and I are trying to make a 3D game inside babylon.js that could play the online video (YouTube for example) inside the game. We have found a great post on this topic.

After following the discussion in that post, we incorporated the method proposed by Bryan_Chiang. The result looks great: we can play the online video inside the game with click to pause/resume functionality.

However, we do have some urgent questions at this moment:

  1. For our game, we’d love to enable VR mode. However, upon enabling vrhelper, once the user enters VR mode, the video playback is gone. The user can still hear the sound coming from the video, but the render is broken. You can try it out here: https://playground.babylonjs.com/#TGZ9GN#32. We would really love to have this functionality, and we are seeking help from experts.

  2. For the VR mode, if vrHelper.enableInteractions() is enabled the entire site will be frozen. I think you can still quit the VR but the game stays broken afterward.

We also have some further question:

  1. Right now we are having trouble controlling the volume of the video playback. We are not sure if there is a way to do that inside of babylon.js?

  2. Is there a way to implement such a feature so that the iFrame can not only play a single YouTube video but rather a sequence of videos from a playlist?

Thank you so much for any kind help in advance! :blush:

1 Like

This method of playing YouTube is actually using CSS so its not part of the Babylonjs canvas, which means it cannot switch into VR. If possible, use some other way for video where you are using a Babylon.js texture.

If you still want you use this method, you can manipulate the YouTube video if you put an onPointerOver event on the video div that will set pointer-events style to “none” for the canvas. That means when your mouse is over the video div all mouse-clicks will reach the video player. You will have to come up with an alternative method for mobile devices though (because there is no pointer over event)

1 Like