Checking if there is content in an iframe after pressing the back button in browser and going forward

I have a site that plays YouTube videos through an iframe. The site checks if the iframe has a source before allowing some actions. In the example below, the action is opening the iframe in full screen. If a user presses the back button in their browser with a source in the iframe and presses the forward button, the iframe contents load again but the iframe source is empty. How would I be able to check if there is content in the iframe? Note that for simplicity the code provided is shortened. Here is the original source.

document.getElementById("player").src = "https://www.youtube-nocookie.com/embed/KUh2O8HylUM";

function fullscreen() {
  var player = document.getElementById("player");
  if (player.src !== null) {
    if (player.requestFullscreen) {
      player.requestFullscreen();
    } else if (player.webkitRequestFullscreen) {
      player.webkitRequestFullscreen();
    } else if (player.msRequestFullscreen) {
      player.msRequestFullscreen();
    } else {
      alert("Unable to open video in full screen");
    }
  } else {
    console.log("Error: unable to toggle full screen\nReason: no URL found");
  }
}
<iframe id="player"></iframe>
<button id="full-screen">Open video in full screen</button>



Read more here: https://stackoverflow.com/questions/68480091/checking-if-there-is-content-in-an-iframe-after-pressing-the-back-button-in-brow

Content Attribution

This content was originally published by UnrealApex at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: