Replace data-src TO src with Javascript

Replace data-src TO src with Javascript

by Adi Jaya

HTML

<div class="container-iframe">
  <iframe class="iframe-youtube" data-src="https://www.youtube.com/embed/FxnGaURm3B8"></iframe>
</div>

<button>REPLACE <code>data-src</code> to <code>src</code></button>

<div class="container-iframe">
  <iframe class="iframe-youtube" data-src="https://www.youtube.com/embed/Yw74sDWPH7U"></iframe>
</div>

CSS

.container-iframe {
    padding: 10px;
    border: 1px solid #b1b1b1;
}
.iframe-youtube {
    border: none;
}

JavaScript

//pure JS
document.querySelector('button').addEventListener("click", function(){
	var iframeYTB = document.querySelectorAll('.iframe-youtube');
	for (var i=0; i<iframeYTB.length; i++) {
		if(iframeYTB[i].getAttribute('data-src')) {
		iframeYTB[i].setAttribute('src',iframeYTB[i].getAttribute('data-src'));
		iframeYTB[i].removeAttribute('data-src');
		}
	}
});