Search code examples
javascripthtmljquerycssiframe

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

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 class="embed-responsive-item" 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 class="embed-responsive-item" style="height:300px; width:100%" src="https://www.youtube.com/embed/WDlu1OhvYBM" allowfullscreen></iframe>');
        }
    });   
});

Any suggestion on how I can loop this?

Thanks!

Solution

  • 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.