Youtube Video iFrame Doesn't Quite Work

Help & Support
1

I am very new to Play Canvas, just started yesterday. But I have been coding in Unity for about 5 years and Unreal for about 2 years; and professionally developing for 4 years now. I am trying to use the iFrame tutorials to build a simple scene that displays a youtube video on a plane. I downloaded and imported the css3Renderer.js from the example and tried to use it myself.

I was able to get almost everything working however the video is black. The UI for the video is there and it even starts with the Thumbnail but the moment I press play the video goes black. I feel like I am missing something really small here.

This is the link to my project again I am very new so I might be doing this wrong.
https://playcanvas.com/editor/scene/1097096

Thank you for any help

1 Like
2

Seems to work here:

image
image2010×1282 522 KB

There may be a browser/platform combination this doesn’t work on. I know iOS has some placement issues that I’ve yet to fix.

3

That makes sense,

On my android using chrome it worked fine. But on my windows PC using chrome it is black but all the UI is there.

image
image2125×1262 180 KB

I am not very familiar with the HTML5 & Javascript environment. If I understand correctly Javascript creates a canvas to display the application on the HTML5 webpage. And we are using DOM to render the video. The placement of the video is via the Css3Renderer & Css3Plane, provided by the PlayCanvas Youtube tutorial. So if that is correct would I need to look in the Css3Renderer and Plane scripts?

Or is there a simpler solution/workaround?

4

Looking at it more though, the sample project works for me it is only when I tried to implement it when I found problems.

So I am the problem here, haha, I just don’t know where I went wrong.

5

Yes, your understanding is correct. The code effectively cuts a ‘hole’ in the canvas to allow DOM objects behind the canvas to show through (the YT video in this case)

Do you have any extensions installed that could block the video?

I’ve just tried this on Windows 10 and Chrome and the video comes through fine in your project.

6

No extensions that I am aware of. This is my work computer that was purchased recently. I have not downloaded any extensions. Let me just check if anyone else has in the office.

7

That’s really bizarre :thinking: Any errors in the browser console?

8

playcanvas-stable.dbg.js:60208 script ‘videoTexture’ is not found, awaiting it to be added to registry

was the only warning I have but that is from a script that stopped from preloading and am assuming is there because there is an disabled object with that script attached.

9

It looks like that warning is because of the script not being preloaded. But as it’s not being used, that shouldn’t be an issue.

10

Can you try with a different browser please?

11

Just tried Microsoft Edge and it didn’t work either.

image
image2167×1612 260 KB

12

Do you get any audio?

13

Yea the audio is playing

14

Can you also try reducing the pixel per unit to 300 or something?

image
image698×134 3.45 KB

And/or try reducing the quality of the video to 480p

15

Still didn’t work, I changed it to 640, 480, 320, 300, 240, and 125, just to test things out. but nothing worked.

Separately do I have to click parse after making these changes? I did just in case but I wanted to know for sure.

16

Parse is for when you add or change attributes in the script file.

I can’t think of what it could be without debugging it. It looks like the video stream is failing to render but I would have thought it would give errors in the console

17

Is there another way to debug it?

18

Oh did you try lowering the video quality to 480p on the Youtube controls?

19

I would be digging into the network tab of the browser tools to see if it is getting data from YouTube at all for the video stream as a start :thinking:

20

Sorry I guess misunderstood, the 480p but I changed now and still didnt work.

Sorry, I am on the phone with my boss but I am going to start digging through the network tabs and look into this for a bit. Thank you for all your help.

Another thing I might try and is just start from scratch I am only ankle deep.