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!
How about something like below
var addIFrame = function(btnId, frameId, src){
$(btnId).click(function(){
if(!$('#iframe').length) {
$(frameId).html('<iframe class="embed-responsive-item" 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]);
}
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.
This might help
var addIFrame = function(btnId, frameId, src){
$(btnId).click(function(){
if(!$('#iframe').length) {
$(frameId).html('<iframe class="embed-responsive-item" 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