Загрузка видео по клику.
Здравствуйте. Есть такая проблема. На сайте в каорусель использую видео c youtube и их очень много. Естественно все это вешает сайт.
Нашел решение в виде js кода, который формирует frme по нажатию на элемент. Но есть проблема. В данном скрипте не получается добавить адаптив для видео, а это необходимо. Как можно решить проблему и добавить адаптив? Спасибо. 'use strict'; function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9 ):f()} 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++) { // Находим постер для видео, зная ID нашего видео videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)'; // Размещаем над постером кнопку Play, чтобы создать эффект плеера var play = document.createElement("div"); play.setAttribute("class","play"); videos[i].appendChild(play); videos[i].onclick = function() { // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1 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 будет как у элемента-родителя iframe.style.width = this.style.width; iframe.style.height = this.style.height; // Заменяем начальное изображение (постер) на iFrame this.parentNode.replaceChild(iframe, this); } } }); <div class="item"> <div class="youtube" id="[[+vd]]" style="width: 500px; height: 281px;"></div> </div> |
А параметр controls=2 не решает проблему? - https://developers.google.com/youtub...rameters?hl=ru
|
Да. Спасибо. Работает. Только с мобильных надо два раза нажимать чтобы видео запустить можно как-то с одного?
|
Должно с одного раза запускаться, это у вас наверное со своим кодом что-то наложилось.
|
Часовой пояс GMT +3, время: 00:24. |