How to cancel iframe and load it after load button

Question

I'm on a project where I need to make iframe not load until "consent" is given.

The problem is, I can't touch the page's code, so my script needs to select the iframes and stop them to load until consent is given.

HTML:

<div class="video-div">
    <iframe class="iframeClass" width="560" height="315" src="https://www.youtube.com/embed/bzNcbNnpvR8" frameborder="0" allow="accelerometer;
           autoplay;
           clipboard-write;
           encrypted-media;
           gyroscope;
           picture-in-picture" allowfullscreen>
    </iframe>
</div>

<div class="video-div">
    <iframe class="iframeClass" width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer;
           autoplay;
           clipboard-write;
           encrypted-media;
           gyroscope;
           picture-in-picture" allowfullscreen>
    </iframe>
</div>
<div class="video-div">
    <iframe class="iframeClass" width="560" height="315" src="https://www.youtube.com/embed/996OiexHze0" frameborder="0" allow="accelerometer;
           autoplay;
           clipboard-write;
           encrypted-media;
           gyroscope;
           picture-in-picture" allowfullscreen>
    </iframe>
</div>

Style

.btn {
  background-color: GREEN;
  border: none;
  display: flex
    }

Script

const iframe = document.getElementsByClassName('iframeClass')
    for (i of iframe) {
        const originalUrl = i.src
        const emptyUrl = ""
        i.src = emptyUrl
        function loadVideo(){
            i.src = originalUrl
        }
    }

    const videoDiv = document.getElementsByClassName('video-div')
    for (i of videoDiv) {
        i.style.backgroundColor = '#CACACA'
        i.style.margin = '10px'
        var btn = document.createElement("BUTTON");
        btn.innerHTML = "CLICK ME";
        btn.className = 'btn'
        btn.onclick = "loadVideo"
        i.appendChild(btn)
    }

I'm stuck because when I press the button nothing happens, and when I could make it load the video, It only loaded the last one...

Can anyone help me?

Thanks in advance!

Answer 1

There are several ways do this, but the most easiest is to simply remove the iframes altogether to prevent them from loading, then when permission is given later, restore the iframe.

https://jsfiddle.net/y8zgfn26/2/

// where all iframe video's html will be held
var videos = [];
// select all iframes
var iframes = document.querySelectorAll('iframe');
// loop through each iframe
for (var i = 0; i < iframes.length; i++) {
  // shorten the reference to the current iframe
  var iframe = iframes[i];
  // get the iframe html
  var video = iframe.outerHTML.trim();
  // save the video html into the collection of videos
  videos.push(video);
  // create a button wrapper
  var create_btn = document.createElement('div');
  // add the button html to the wrapper with the current index
  create_btn.innerHTML = '<button class="btn-allow btn" data-index="' + i + '">Allow?</button>';
  // replace the iframe html with the button html
  iframe.replaceWith(create_btn);
}

// now that there are buttons, select all buttons on the page
var buttons = document.querySelectorAll('button');
// loop through each button
for (var i = 0; i < buttons.length; i++) {
  // add click events to each button
  buttons[i].addEventListener('click', function(event) {
    // shorten the reference to current button the user clicked on
    var btn = event.target;
    // get the index from the button
    var iframe_index = btn.getAttribute('data-index');
    // select the correct video array index based on the button's index
    var video = videos[iframe_index] || '';
    // alert the user that they allowed the video to load
    window.alert('You allowed video index number ' + iframe_index + '.');
    // create an iframe wrapper
    var create_video = document.createElement('div');
    // add the iframe html to the wrapper
    create_video.innerHTML = video;
    // replace the button html with the iframe html
    btn.parentElement.replaceWith(create_video);
  });
}