Black background element

[pxlatedtraveler]

I’m pulling my hair out on this. I’m still pretty new to coding.
I’ve got a cocos creator project with a VideoPlayer component, and I wish for the video to have other renderable nodes overlaying it.
I’ve checked the “Stay On Bottom” checkbox.
Following the docs, I went into the cocos2d/core/platform/CCMacro.js file, and changed the ENABLE_TRANSPARENT_CANVAS boolean to true.

This results in my cocos elements definitely overlaying the video. I hear it playing in the background, and if I check off “Everything” (which also checks off “default” from cullingMask under camera), I’ll see the video play out, underneath a black rectangle that’s as big as my cocos canvas.

I’ve only got 1 other node that has a renderable elements (a label).

I later tried making the backgroundColor of Main Camera have 0 alpha, but that black rectangle still never goes away.
(First, I tried doing it from the GUI editor, in Main Camera’s Background Color property, and then I tried doing it by code, and added cc.Camera.main.backgroundColor(0,0,0,0); to my main script’s start() method - neither did anything about the black rectangle).

In Chrome’s dev tools, in the CSS section, I’ve changed background color to be transparent, but it doesn’t change that rectangle.

I’ve console-logged cc.macro.ENABLE_TRANSPARENT_CANVAS inside the start() method, and it says that it’s false, despite having changed the boolean in the JS file mentioned above. Maybe that’s it, but if changing it in said JS file doesn’t work, then I’m not sure where else to look.

I don’t know if anything I’m doing is even right, or if I’m just making things worse.

Before using the Stay On Bottom option, I was using the method in this stackoverflow answer to accomplish my video overlay: https://stackoverflow.com/questions/59064897/video-player-always-stay-at-the-top-in-cocos-creator
It yielded the same results.

Testing using Browser, using Chrome, on a Windows 10 PC.
CC version 2.3.4 (cause of work, can’t upgrade this yet)
Dunno if it matters that I’m using TypeScript?
I don’t know what other information to pass along, but I’ll gladly provide.
Any help is appreciated!

[knox]

example-cases git：https://github.com/knoxHuang/example-cases/tree/v2.4.0/assets/cases/02_ui/09_videoplayer

Here’s an example of stayOnBottom, you can try it out

[pxlatedtraveler]

That’s perfect. I looked at the script in the example, and was able to get it to work on my project!!

Turns out, I needed to add cc.macro.ENABLE_TRANSPARENT_CANVAS = true; at the very top of my main script file - rather than changing it in the engine files.
I didn’t realize I could put it there.

Thank you so much @knox !