Error for dynamic src in the <cloudflare-stream> tag

I am currently working on a project where the user uploads a video to cloudflare using simple html form. Frontend technology used is Angular and the backend technology used is Node.Js. The uploading part is working fine, I am getting the mediaId which is supposed to be placed in the “src” tag for Cloudflare Angular Component.

Here is my HTML Code
<cloudflare-stream id="example-video" [controls]="true" width="640px" height="640px" src="{{mediaId}}" ></cloudflare-stream>

But now I am getting the following error on the player.player 1

After right clicking on the player and selecting the “Copy Video ID” option,

I am able to get the value which I passed in the “mediaId” variable in the above code.
I am not able to play the video if the src is dynamic.
The error vanishes and I am able to play the video if I pass “644822f93dcddab3e9441587d184ca2f” to the src instead of a variable which contains this string.

Can anyone help me regarding this? I have already enabled CORS and disabled my adblocker just in case.

Thank You

Interesting. Could you share a way to replicate this on codepen?