Can't access button inside srcdoc iframe?

 

you cannot directly access or manipulate elements inside an iframe with the srcdoc attribute using JavaScript from the parent document due to security restrictions (same-origin policy). This limitation makes it challenging to interact with elements inside the iframe from the parent document.

If you need to access elements inside the iframe, you should consider using the postMessage API to communicate between the parent document and the iframe. This allows you to send messages and data back and forth, enabling limited interaction between the two.

Here's a high-level example of how you can use postMessage to communicate with an iframe:

In the parent document:

javascript

const iframe = document.getElementById('covervideo');

iframe.contentWindow.postMessage('PlayVideo', 'https://www.example.com');

In the iframe (inside the srcdoc content):

javascript

// Listen for messages from the parent document

window.addEventListener('message', function (event) {

    if (event.origin === 'https://www.example.com' && event.data === 'PlayVideo') {

        // Code to play the video inside the iframe

        // You would need to access and interact with the video player API here

    }

});

Please note that the above example provides a basic structure for communication. You will need to adapt it to your specific use case, including accessing and controlling the video player inside the iframe.

Keep in mind that if you do not have control over the content within the iframe (e.g., if it's hosted on a different domain), you may not be able to interact with it programmatically due to security restrictions.