Youtube Player API: Not working in nested iframes

I have an application that shows Youtube videos using YTPlayer API, People can log in to my application and add some comments to the Video via messages and replies.

It is working fine without any issues, the problem I am having now is if I embed my application in another webpage the YTPlayer is not working.

this.player = new YT.Player("youtube-placeholder", {
                videoId: this.videoId,
                playerVars: {
                    "cc_load_policy": 1,
                    "cc_lang_pref": "en",
                    "controls": 0,
                    "disablekb": 1,
                    "enablejsapi": 1,
                    "fs": 0,
                    "iv_load_policy": 3,
                    "modestbranding": 1,
                    "origin": "https://www.my-url.com",
                    "playsinline": 1,
                    "rel": 0
                },
                events: {
                    "onReady": this.onPlayerReady.bind(this), 
                    "onStateChange": this.onPlayerStateChange.bind(this)
                }
            });

The onReady is triggering everytime, so the player is being loaded but the this.player.playVideo() is not doing anything and sometimes the this.player object does not contain the playVideo method at all. I am also not getting any errors on the console.

Any help is appreciated.

Thank you.

Had the same issue. Can be fixed by adding the allow="autoplay" attribute to all iframe elements. In my case the top iframe element was the one missing this attribute, thus restricting all child elements.