Recommand · June 10, 2021 0

How to cancel iframe and load it after load button

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!