Embedding a YouTube video into a VR experience project

[dkw]

Hello, everyone. This is my second crack at trying to fix this recurring issue I’ve been having.

So, I’m trying to create a VR experience where users can enable captions on an embedded YouTube video on their own discretion. In the past, I’ve been burning captions into the video themselves, and I’m making sure that I don’t do this for future projects because some users don’t like viewing videos with captions at all.

Here’s a screenshot showing what I wanna do. Is there any possibility that I can do this without using additional software or paying for extra services? I don’t know if I’m overthinking this or not, but it’s been a frustrating process, to say the least. Also, I would like the buttons on the top left of the page to control video playback.

I’m also posting a link of my code, so I can understand what I’m doing wrong.

Glitch Code Editor ･ﾟ✧

[nobody]

would this help in any way?

ignore the top, it doesnt return the actual captions in the response (unless thats ok and you could put the captions by yourself)

[dkw]

Hmm… maybe the idea is just to embed subtitles in the video editing software I use instead of YouTube itself. Would users be able to toggle captions on or off with this method, if they’re watching it as a VR experience? I may need to create another button that toggles captions on or off, I guess.

[dkw]

I noticed with these functions, that these enable or disable video playback. Are there any additional functions that are available that enable and disable captions? I’m not the most familiar with glitch and I’m a beginning software dev, but maybe I can access the various functions in their library.

        function pausePlayHandler(e) {
          if (vid.paused) {
            vid.play();
            pauseBtn.style.visibility = "visible";
            playBtn.style.visibility = "hidden";
          } else {
            vid.pause();
            pauseBtn.style.visibility = "hidden";
            playBtn.style.visibility = "visible";
          }
        }

        function muteUnmuteHandler(e) {
          if (vid.volume == 0.0) {
            vid.volume = 1.0;
            muteBtn.style.visibility = "visible";
            unmuteBtn.style.visibility = "hidden";
          } else {
            vid.volume = 0.0;
            muteBtn.style.visibility = "hidden";
            unmuteBtn.style.visibility = "visible";
          }
        }

        function stopHandler(e) {
          vid.currentTime = 0;
          vid.pause();
        }

        function replayHandler(e) {
          vid.currentTime = 0;
          vid.play();
        }```

[nobody]

try here, the example hopefully contains the script for enabling/disabling captions, and you can edit it to work however you would like.

you can also check the cc_load_policy on this as from my research, that is what controls the captions displaying or not.

if none of these works, i recommend you check this as that’s were i found most of my information.

and if all of these don’t work. im sorry, but i think i am unable to help further, maybe someone else can come in and help.

im also a little confused on how your doing this, maybe if i can understand by myself i might help more.

[javaarchive]

How are you embedding the iframe youtube video into the scene? Are you transforming it in 3D with css?
I’d recommend replicating something like this three.js examples