I wanted to find out if there is any way to check if the iframe is maximized - in my case it’s an iframe video from youtube. I would like to find a way to identify whether the button was pressed to expand to full screen or not.

I need this in order to somehow make the channel buttons not clickable, to share and watch later that are located at the top of the video, recently you have disabled the ability to disable them when embedded (it is written that there is only for AS3 players, but in fact not). I try to do something differently by imposing, for example, a transparent div on top of the video, but I can’t track the moment when the video unfolds to full screen. I tried by clicking through the class of the expand button to catch the action like this:

$(document).on("click", ".ytp-fullscreen-button", function () { alert('d'); });

but since a third-party site naturally opens up in the iframe, so it’s impossible to share its contents with the DOM, are there any other ways?

  • Give a working example of iframe from youtube video. - Stepan Kasyanenko

1 answer 1

some reasoning

one)

I would like to find a way to identify whether the button was pressed to expand to full screen or not.

I assume that the button expands not a frame, but a video tag.

https://developer.mozilla.org/ru/docs/DOM/Using_fullscreen_mode

2) according to the same docks

  function toggleFullScreen() { if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // разворачиваем } else { // сворачиваем } }

3) https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement

The Document.fullscreenElement read-only property that it is not currently in use.