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.

How to attach the youtube video to the website through YouTube API javascript

I have this code in JS:
/*
Video play
=========================== */
$("#ytplayer").css({'opacity':'0','filter':'alpha(opacity=0)'});
$( ".start-video" ).on("click",function(){
$('#ytplayer').fadeTo(900, 1);$( ".video-image" ).fadeOut(800);
return false;
});
$(document).on('click', '.start-video', function () {
$(this).fadeOut(800);
player.playVideo();
return false;
});
And I Have this code in HTML:
<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player"></div>
</div>
<button class="start-video"></button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
</div>
I don't know where to paste the iFrame from YouTube. Please help.

<div class="col-md-6">
<div class="video-wrapper">
<div class="video-container">
<div id="ytplayer" class="player">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xmVRZr91Qok" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<button class="start-video">Start</button>
<div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />
All you need to do is to add the iframe tag to your ytplayer Div

Bootstrap side tabbed pane

Hi all I am trying to get an iframe of 500x200 to be on the right side of the tabs.
If the amount of tabs is more than the 200 height then id like to be able to have them be scrollable. Could someone point me in the right direction?
I'l eventually put the iframe in a panel and have the panel the size of col-lg-9 to fill the rest of the space.
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active">Home</li>
<li>DPA</li>
<li>Antwon</li>
<li>SSS</li>
<li>Ad</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.google.ie">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
<div class="tab-pane" id="sss" data-src="http://www.reddit.com/">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="ad" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myTabs').bind('show', function(e) {
paneID = $(e.target).attr('href');
src = $(paneID).attr('data-src');
// if the iframe hasn't already been loaded once
if($(paneID+" iframe").attr("src")=="")
{
$(paneID+" iframe").attr("src",src);
}
});
</script>

So, something like this?
#myTabs {float:left; height:200px; overflow:auto; }