Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.09.2018, 13:59
Новичок на форуме
Отправить личное сообщение для mihail0071 Посмотреть профиль Найти все сообщения от mihail0071
 
Регистрация: 15.09.2018
Сообщений: 2

Загрузка видео по клику.
Здравствуйте. Есть такая проблема. На сайте в каорусель использую видео 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>
Ответить с цитированием
  #2 (permalink)  
Старый 15.09.2018, 14:11
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 306

А параметр controls=2 не решает проблему? - https://developers.google.com/youtub...rameters?hl=ru
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2018, 23:14
Новичок на форуме
Отправить личное сообщение для mihail0071 Посмотреть профиль Найти все сообщения от mihail0071
 
Регистрация: 15.09.2018
Сообщений: 2

Да. Спасибо. Работает. Только с мобильных надо два раза нажимать чтобы видео запустить можно как-то с одного?
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2018, 03:55
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 306

Должно с одного раза запускаться, это у вас наверное со своим кодом что-то наложилось.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
добавление картинки или видео по клику в div Dmitriy154 Общие вопросы Javascript 12 16.01.2017 14:50
Загрузка фото с диска по клику на фото -=Vovka=- AJAX и COMET 2 15.01.2017 11:11
Смена видео по клику. lolok Элементы интерфейса 6 18.07.2016 16:14
Загрузка контента в центральный фрейм по клику в tree.Panel sergeyv ExtJS 9 06.09.2013 20:40
Загрузка видео на Youtube с помощью XHR2 RazDroid AJAX и COMET 2 15.01.2013 02:06