Lazy Loading: DIV onClick, hide element, add iFrame. Cant figure out the loop process-CodePudding

I have a webpage containing 30 iFrame videos from different sources.

This resulted in extremely high loading times, so I wanted to create a type of lazy load.

So, on page load, it will display the video's image with a play button overlay. Using JavaScript/Jquery OnClick, it will add the iFrame, and hide the image.

The Problem

I am not sure how to loop this function so I can avoid copying the Javascript 30 times.

JS Fiddle https://jsfiddle.net/wmLdabon/

HTML

<div class="embed-responsive embed-responsive-16by9" id="iframeHolder1">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5c79a8cfeb3ce837863155f5?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton1">Play Video</div>
  </div>
</div>

<div class="embed-responsive embed-responsive-16by9" id="iframeHolder2">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5ea6fd9dd553f808ba5bf897?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton2">Play Video</div>
  </div>
</div>

JAVASCRIPT

//First video
$(function(){
    $('#playButton1').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder1').html('<iframe  style="height:300px; width:100%" src="https://www.youtube.com/embed/kujV1qHr1ow" allowfullscreen></iframe>');
        }
    });   
});

//Repeat for 2nd video.
$(function(){
    $('#playButton2').click(function(){ 
        if(!$('#iframe').length) {
                $('#iframeHolder2').html('<iframe  style="height:300px; width:100%" src="https://www.youtube.com/embed/WDlu1OhvYBM" allowfullscreen></iframe>');
        }
    });   
});

Any suggestion on how I can loop this?

Thanks!

CodePudding user response：

How about something like below

var addIFrame = function(btnId, frameId, src){
    $(btnId).click(function(){ 
        if(!$('#iframe').length) {
                $(frameId).html('<iframe  style="height:300px; width:100%" src="'   src   '" allowfullscreen></iframe>');
        }
    });   
};

var youtubeURL[] = { //array of youtube SRC}
for(let i=0; i <30; i  ){
   var btnId = "playButton"   (i 1);
   var frameId = "iframeHolder"   (i 1);
   
   addIFrame(btnId, frameId, youtubeURL[i]);
}

CodePudding user response：

An option is to set the video URL in the targeting DIV with data-xxx, add a common CSS class name video-container for lookup

<div class="embed-responsive embed-responsive-16by9 video-container" data-video="https://www.youtube.com/embed/kujV1qHr1ow">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5c79a8cfeb3ce837863155f5?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton1">Play Video</div>
  </div>
</div>

<div class="embed-responsive embed-responsive-16by9 video-container" data-video="https://www.youtube.com/embed/WDlu1OhvYBM">
  <div class="playButtonContainer" style="height:300px;width:100%;padding-top: 24%;background-image:url(https://i.insider.com/5ea6fd9dd553f808ba5bf897?width=700&format=jpeg&auto=webp);background-repeat: no-repeat;">
    <div class="playButton" id="playButton2">Play Video</div>
  </div>
</div>
<script>

$('.playButton').on('click', function() {
    const container = $(this).closest('.video-container');
    const video = container.data('video'); // The video URL
    container.html(<make your code segment>);
});

$('.playButton').on('click', ...) will find all of your play buttons with class name playButton and attach the event. Find the containing div.video-container to replace with the video iframe.

CodePudding user response：

This might help

var addIFrame = function(btnId, frameId, src){
    $(btnId).click(function(){ 
        if(!$('#iframe').length) {
                $(frameId).html('<iframe  style="height:300px; width:100%" src="'   src   '" allowfullscreen></iframe>');
        }
    });   
};

var youtubeURL = []; // empty array for the iframe urls
for(let i=0; i < $(".embed-responsive").length ; i  ){
   var btnId = "playButton"   (i 1);
   var frameId = "iframeHolder"   (i 1);
   
   addIFrame(btnId, frameId, youtubeURL[i]);
}

Use $(".embed-responsive").length to automatically determine the number of the elements instead of using static integer