Getting access of iframe imbedded page elements in js, JavaScript

Question

document.querySelector('#clickbtn').addEventListener('click', () => {
  document.querySelector('.ytp-large-play-button ytp-button').click();
})

<button id="clickbtn">Click</button>


<iframe width="560" height="315" class="clickbtn" src="https://www.youtube.com/embed/cmA-IyD8_BA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in- 
    picture" allowfullscreen>
    </iframe>

I'm trying to start playing video from my own created button. but not working. Have any solution?

console:

Uncaught TypeError: Cannot read properties of null (reading 'click') at HTMLButtonElement.

Answer 1

use the youtube frame api from here, run/stop the video by

function stop() {
  player.stopVideo();
}

OR

function run() {
  player.playVideo();
}