Как можно отложить загрузку iframe встроенного плеера Ютуба на форуме, вызывая его лишь по нажатию кнопки? Что бы он не прогружался во время загрузки страницы? А то ведь если на странице таких встроенных роликов несколько - то страница ощутимо грузится.

 

Искал в сети методы как это реализовать, вот нашёл отличный способ - https://ruseller.com/lessons.php?rub=32&id=2125

 

А вот пример внедрения этого способа - https://www.languagesandnumbers.com/articles/en/The-Canticles-of-Holy-Mary-and-the-Galician-Portuguese-language/

Страница загружается практически сразу, что не может не радовать. Встроенный плеер Ютуба активируется по встроенной кнопке, размещённой на изображении-миниатюре к видеоролику.

 

Отличный способ, однако пробовал его реализовать - на жаль ничего не получилось.

 

Прошу помощи у специалистов, как можно такое реализовать, не обязательно как в том способе что я привёл выше.

Вот товарищ с форума сделал видоизменение для кода:

 

'use strict';
function r(f) {
   /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f();
}

// Master_TW_DAR:
// Данная функция выполняет установку миниатюры по умолчанию.
// Параметр videoID - идентификатор YouTube-видео.
function setDefaultImage(videoID) {

   // Переменная строкового типа videoMiniImage по умолчанию хранит имя стандартной миниатюры (sddefault.jpg).
   var videoMiniImage = "sddefault";

   // Переменная логического типа sddefaultIsExist будет хранить результат проверки существования миниатюры.
   var sddefaultIsExist = new Boolean();

   // Выполнить проверку существования требуемой миниатюры.
   // Далее вместо тестового false следует предполагаемый вызов некоторой функции (из API YouTube).
   // Предположительно эта функция возвращает true или false в зависимости от результата.    

   //sddefaultIsExist = функцияПроверяющаяСуществованиеМиниатюры(какие-тоАргументыФункции);
   sddefaultIsExist = false;

   // Если миниатюра sddefault НЕ существует для данного видео, вместо неё будем использовать миниатюру hqdefault.
   if (!sddefaultIsExist) {
       videoMiniImage = "hqdefault";
   }    

   // Возвратить строку с именем миниатюры в вызывающий код.
   return videoMiniImage;
}

r(function() {
   if (!document.getElementsByClassName) {
       // Поддержка IE8
       var getElementsByClassName = function(node, classname) {
           var a = [];
           var re = new RegExp('(^| )' + classname + '( |$)');
           var els = node.getElementsByTagName("*");

           for(var i=0, j=els.length; i<j; i++) {
               if(re.test(els[i].className)) {
                   a.push(els[i]);
               }
           }

           return a;
       }

       var videos = getElementsByClassName(document.body,"youtube");
   } 
   else {
       var videos = document.getElementsByClassName("youtube");
   }

   var nb_videos = videos.length;

   for (var i = 0; i < nb_videos; i++) {        

       // Master_TW_DAR: 
       // Здесь мы используем имя файла миниатюры с помощью возвращаемого значения.        
       // Это значение будет получено при вызове функции setDefaultImage().
       // Функция setDefaultImage() принимает в качестве аргумента идентификатор YouTube-видео.
       videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/' + setDefaultImage(videos[i].id) + '.jpg)';        


       var play = document.createElement("div");
       play.setAttribute("class", "play");
       videos[i].appendChild(play);

       videos[i].onclick = function() {            
           var iframe = document.createElement("iframe");
           var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";

           if (this.getAttribute("data-params")) {
               iframe_url+='&' + this.getAttribute("data-params");
           }

           iframe.setAttribute("src", iframe_url);
           iframe.setAttribute("frameborder", '0');

           iframe.style.width  = this.style.width;
           iframe.style.height = this.style.height;

           this.parentNode.replaceChild(iframe, this);
       }
   }
});

 

 

Вроде код правильный, тем не менее скрипт наотрез не хочет вставлять sddefault.jpg. То есть, если sddefault.jpg существует, всё равно вставляет миниатюру худшего качества hqdefault.jpg.

19.12.2019 в 23:59, Haktar сказал:

Вроде код правильный, тем не менее скрипт наотрез не хочет вставлять sddefault.jpg. То есть, если sddefault.jpg существует, всё равно вставляет миниатюру худшего качества hqdefault.jpg.

Замучился я с этим скриптом - не получается. Ребята, подскажите что не так.😥

 

videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';

заменить на 

			var img = new Image();
			img.src = 'http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg';
			img.setAttribute("data-img-index", i);
			img.onload = function() {
				var index = this.getAttribute('data-img-index');
				videos[index].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[index].id + '/' + ((this.width == 120) ? 'hqdefault' : 'sddefault') + '.jpg)';
			}

 

10 часов назад, newbie сказал:

заменить на 

Ух ты, супер - то что надо! Большое спасибо!