How to embed some YouTube videos on non-public domain pages? - iframe

Question

I am currently writing an audioplayer with which YouTube videos can be played & controlled with hotkeys. However, I am having an issue: Videos that should be available for embedding get a "Not available" error for some reason.
An example of the embedding code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/d6QE4EJrIFc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
When I paste this into any random .html file and open it in my browser, I get the error stated above. However, when I paste the video in JSFiddle it can be embedded perfectly fine: https://jsfiddle.net/vnkLzh9r/3/
The above trick with JSFiddle is something I got from this StackOverflow answer.
As far as I am aware, there are no settings on YouTube to disalow embedding of videos on non-public domains, but yet that seems to be the problem here. Can anyone confirm if that is the underlying issue?
In addition, is there a way for me to embed these videos without having to rely on a public domain?
Update
Okay, I have put the iFrame in an Angular project and hosted the project with NG serve. Then I access the page with http://localhost:4200 and the iframe actually works & plays the video. For some reason, when I open the .html file with just the iframe in it, that the video does not want to play? In addition, I have the following debug info of the YT player:
{
"ns": "yt",
"el": "embedded",
"cpn": "nVMH8LozAhZ1QLVb",
"docid": "d6QE4EJrIFc",
"ver": 2,
"cmt": "0",
"ei": "uUlYXfnOCoLj-gbKsYSAAQ",
"fs": "0",
"rt": "311.975",
"euri": "",
"lact": 1,
"cl": "263586394",
"mos": 0,
"state": "80",
"volume": 77,
"c": "WEB_EMBEDDED_PLAYER",
"cver": "20190816",
"cplayer": "UNIPLAYER",
"cbr": "Firefox",
"cbrver": "68.0",
"cos": "Windows",
"cosver": "10.0",
"hl": "en_US",
"cr": "NL",
"len": "254",
"fexp": "23744176,23751767,23788875,23804281,23818122,23818585,23827085,23829162,23832308,23834462,9449243",
"size": "315:560",
"inview": "1",
"vct": "0.000",
"vd": "NaN",
"vpl": "",
"vbu": "",
"vpa": "1",
"vsk": "0",
"ven": "0",
"vpr": "1",
"vrs": "0",
"vns": "0",
"vec": "null",
"vvol": "0.77",
"creationTime": 313013,
"totalVideoFrames": 0,
"droppedVideoFrames": 0,
"corruptedVideoFrames": 0,
"debug_error": {
"errorCode": "auth",
"errorDetail": "0",
"errorMessage": "Video unavailable",
"Ph": "",
"Uz": "0"
},
"relative_loudness": "NaN",
"user_qual": "hd1080",
"debug_videoId": "d6QE4EJrIFc",
"0sz": false,
"op": "",
"yof": false,
"dis": "",
"gpu": "ANGLE_(NVIDIA_GeForce_GTX_1070_Ti_Direct3D11_vs_5_0_ps_5_0)",
"cgr": true,
"debug_playbackQuality": "unknown",
"debug_date": "Sat Aug 17 2019 20:44:08 GMT+0200 (Central European Summer Time)"
}