Develop Reference

loading="lazy" doesn't work in iframes, and data is fetched immediately when page finish loading

In a website I'm working on I have 3 embedded youtube iframes that are offscreen. I put loading="lazy" on all of them to optimize my website. I have latest chrome version with all necessary flags enabled. All have width and height and are not hidden with any css. But when the main page loads up, all the scripts and data related to the videos are immediately fetched, even before scrolling down to them. Anyone has an idea why it happens?
const Videos = () => {
return (
<div className="row pt-5 pb-5">
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
<div className="col-sm-4">
<iframe className="offset-sm-1 col-sm-10" width="560" height="315" src="..." loading="lazy" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen title="" rel="noopener noreferrer"></iframe>
</div>
</div>
)
}

Can't swap div elements using .innerHTML properly

I'm new to html / css / javascript and was making a website. I have divs that I call video panels because on each panel there's a video and a caption. I am trying to write a script that when called grabs the contents of the panels and places the contents of the next panel (on each click) where the contents of the 0th panel would be (all are hidden but the 0th panel in the array, trying to make each next panel appear on click).
This is my first question, sorry if it's worded weird and thanks for the help!
var counter = 0;
function nextSlide() {
var panel0 = document.getElementById("panel0").innerHTML;
panel1 = document.getElementById("panel1").innerHTML;
panel2 = document.getElementById("panel2").innerHTML;
panel3 = document.getElementById("panel3").innerHTML;
panel4 = document.getElementById("panel4").innerHTML;
var panels_contents = [panel0, panel1, panel2, panel3, panel4];
if (counter < 4) {
var switcher = panels_contents[counter + 1];
original = panels_contents[0];
panels_contents[0] = switcher;
panels_contents[counter + 1] = original;
counter++;
} else {
counter = 0;
}
}
#panel1 { display: none; }
#panel2 { display: none; }
#panel3 { display: none; }
#panel4 { display: none; }
<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<button onclick="nextSlide();">Press me</button>

i have updated your code . you can use below code it will work for you
var counter = 0;
function nextSlide() {
var nextSlide = counter + 1 ;
if (nextSlide <= 4) {
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter++;
} else {
counter = 0;
document.getElementById('panel4').style.display = 'none';
document.getElementById('panel0').style.display = 'block';
}
}
#panel1 { display: none; }
#panel2 { display: none; }
#panel3 { display: none; }
#panel4 { display: none; }
<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 0</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel1">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 1</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel2">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 2</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel3">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 3</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel4">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 4</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<button onclick="nextSlide();">Press me</button>
function prevSlide() {
var nextSlide = counter - 1 ;
if (nextSlide >= 0) {
console.log('counter',counter);
console.log('nextSlide',nextSlide);
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter--;
} else {
counter = 4;
document.getElementById('panel4').style.display = 'block';
document.getElementById('panel0').style.display = 'none';
}
}

jQuery closest() in .this element is not working

I have a embeded iframe text element in 3 modal elemets and each has a Copy button. When I click on one copy button, I need to get the output of the particular iframe text. If I use
$(".embed-iframe-text").text();
It will output all the three iframe texts together. To avoid that and get the particular iframe text, I used
$(this).closest(".embed-iframe-text").text();
but can't get the output. What is the wrong here?
$(".copy-iframe").on("click", function() {
var m = $(".embed-iframe-text").text();
var n = $(this).closest(".embed-iframe-text").text();
alert(n);
});
.embed-iframe-text, .embed-src span {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- modal 1 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 2 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 3 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>

var n = $(this).closest(".embed-iframe-text").text();
this won't work as it doesn't comes on the same level, you need to go to the parent and find the item inside it.
use .parents('.modal-body').find(".embed-iframe-text")
$(".copy-iframe").on("click", function() {
var m = $(".embed-iframe-text").text();
var n = $(this).parents('.modal-body').find(".embed-iframe-text").text();
console.log(n)
});
.embed-iframe-text,
.embed-src span {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- modal 1 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 2 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<!-- modal 3 -->
<div class="modal-body">
<div class="embed-iframe">
<span class="embed-iframe-text">
<iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</div>
<div class="embed-button">
<div class="embed-src">
<span>Dynamic text here</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
I just realized from the comment that or .closest('.modal-body').find(".embed-iframe-text") would work too. this will find the parent modal-body first and then the child.

Prevent <iframe> auto load when opening the page

I have more iframe in my page to load the video.
Now I want to prevent the iframe auto load when I opening the page.
What is happening now is all iframe will load when I opening the page.
<div id="youtube-customers-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/ivlfaPPP8TY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-customers-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/8LupmPYSYIo" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-dashboard" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/viCPPRHohSs" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/MYneEOIJYp0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-add" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/CEeuWTqjhQY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-finance-edit" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/p-NSAonIhgA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-payments" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/pURkv_rng-Y" frameborder="0" allowfullscreen></iframe>
</div>
<div id="youtube-partslabor" style="float:left;width:60%;height:100%;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5Ik7WVRxs7c" frameborder="0" allowfullscreen></iframe>
</div>
So, how can I prevent that?
Thanks

Here you are:
for (var i = 0; i < window.frames.length; i++) {
if (navigator.appName == 'Microsoft Internet Explorer') {
window.frames[i].document.execCommand('Stop');
} else {
window.frames[i].stop();
}
}
Hope this help.

You can rename src attribute
src-a="https://www.youtube.com/embed/p-NSAonIhgA"
I think you want to load iframe on some event, so you should use JavaScript, i think you need jQuery when element becomes visible

Fancybox video gallery

I'm trying to make a video gallery with fancybox using some of the tutorials I found for image galleries, but I'm not sure if this is what I'm looking for. All I have is an icon that displays a fancybox with all my iframes I and want to transform the video container into a video gallery.
This is my HTML:
<a id="videoIcon" href="#video" class="fancybox">
<img src="http://megaicons.net/static/img/icons_sizes/8/178/512/photo-video-start-icon.png" width="33" height="33">
</a>
<div id="video" style="display: none;" data-fancybox-group="gallery">
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2plsuh" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6zo" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn66h" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pjpvg" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn6wd" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2pn61r" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2p5add" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2or2yc" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
<iframe class="fancybox_iframe" src="http://www.dailymotion.com/embed/video/x2of336" width="480" height="269" frameborder="0" allowfullscreen=""></iframe>
</div>
And this is my JS:
$(document).ready(function() {
$("a#videoIcon").fancybox();
$(".fancybox_iframe").fancybox({
type : 'iframe'
});
});
Here's a DEMO
Thank you and sorry for my bad English
P.S: The iframes are obtained using an ajax call and placing the response in a template with Handlebars.js, so the div that contains all the videos is actually empty at the beginning. Nevertheless, I don't think this is relevant for the solution.