youtube embed lazy load

by Ciro Santilli

HTML

<div id="load-now">Click me to load all images now!</div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/j_fl4xoGTKU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/TQ5k2u25eI8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/FOwYDlay8rI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/MRhAljmHq-o" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/wAQxIla7F68" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/_6D05gCWh_I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>

CSS

.separator {
  height: 1000px;
  width: 100px;
  border: 5px solid red;
}
img {
  height: 340px;
  border: 5px solid black;
}
#load-now {
  border: 5px solid black;
}