Lazy load youtube iframe but keep focus on play/pause button?

Viewed 202

What would be the correct way to lazy load youtube video but keep focus on play / pause button like on the regular load (so people with disabilities can use space key to pause the video)?

All solution are seem not to keep focus on video and space scrolls the page down.

Is that possible at all?

1 Answers

This might not be the best way to do it as JavaScript will need to be enabled in you client's browser, however you should be able to run a JavaScript function when the iFrame loads like this:

const iframe = document.querySelector('.my-iframe');

iframe.onload = function() {
  onLoad();
}

or like this:

<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>

If you would then write a function called onLoad() that calls the .focus() method on the play button with code similar to that in the next block, you should be able to have focus set to the play button. Note that the following code block assumes that the ID of the play button will be "play_button" which is unlikely to be the case.

funtion onLoad() {
   iframe.contentWindow.document.getElementById("play_button").focus();
};

Hope this helps!

Related