Tengo una página web que contiene 30 videos iFrame de diferentes fuentes.
Esto resultó en tiempos de carga extremadamente altos, por lo que quería crear un tipo de carga diferida.
Entonces, al cargar la página, mostrará la imagen del video con un botón de reproducción superpuesto. Usando JavaScript/Jquery OnClick, agregará el iFrame y ocultará la imagen.
El problema
No estoy seguro de cómo hacer un bucle de esta función para evitar copiar el Javascript más de 30 veces.
Violín JS 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>'); } }); });¿Alguna sugerencia sobre cómo puedo hacer un bucle de esto?
¡Gracias!
¿Qué tal algo como a continuación?
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]); }Una opción es configurar la URL del video en el DIV de orientación con data-xxx , agregar un video-container nombre de clase CSS común para la búsqueda
<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', ...) encontrará todos sus botones de reproducción con el nombre de clase playButton y adjuntará el evento. Busque el div.video-container para reemplazarlo con el iframe de video.
esto podría ayudar
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 para determinar automáticamente el número de elementos en lugar de usar enteros estáticos