Unable to use video controls to play youtube embedded video from page that iframe's the page that iframe's the youtube video

Question

I have a page that's iframing a page that contains a youtube video embedded in an iframe. When I try to click on the play button on the video controls the video attempts to start but then suddenly doesn't play, the only time it starts to play is when I directly click the youtube button located in the middle of the video which is part of the youtube embedded iframe, the video controls are outside of the youtube embedded iframe. Once the video has been played using the youtube button, the play button from the video controls is able to now play and pause the video. This only happens when trying to play the video from the page that iframes the page that's iframing the youtube video. If I try to play the video from the page that's iframing the youtube video directly it works as expected. I attempted some of the solutions suggested such as including the sandbox attribute on the iframe that embed's the youtube video sandbox="allow-scripts allow-same-origin" as well as including the html5=1 query parameter on the youtube video url however this has failed. Links to the attempted solutions https://stackoverflow.com/a/21250665/8513875 and https://support.google.com/youtube/forum/AAAAiuErobUAY5QGdPhXlE/?hl=en&gpf=%23!topic%2Fyoutube%2FAY5QGdPhXlE. For more context of the structure.

1. Page iframing page containing youtube video iframe

<iframe
 sandbox="allow-modals allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
 frameBorder="0"
 id="iframe-0-0"
 class="lazy iframe"
 src="url to page iframing the youtube video"
 scrolling="no"
 style="overflow: hidden;"
></iframe>

2. Page iframing the youtube video. This is the youtube video iframe on that page.

<iframe 
  id="a8eb17993e3e40568078ad0f72ca40bc" 
  sandbox="allow-scripts allow-same-origin" 
  frameborder="0" 
  allowfullscreen="1" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  title="YouTube video player" 
  width="640" 
  height="360" 
  src="https://www.youtube.com/embed/<video_id>?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;cc_load_policy=0&amp;html5=1&amp;widget_referrer=<home url to page iframing the page iframing the video>%2F&amp;origin=<home url to page iframing the video>&amp;widgetid=1" 
  tabindex="-1" 
  style="height: 459.562px; width: 817px; top: 22.7188px; left: 0px;">
</iframe>

Any idea on why this could be happening and what solutions I could attempt. Thank you.