Как добавить видео YouTube на сайт

Как добавить Ютуб на сайт

На странице показа ролика нажать на "Поделиться" — "HTML-код" Где взять код для вставки ролика  Ютуб на сайт

Разместить на своём сайте, используя HTML-режим при редактировании статьи, предложенный IFRAME вида:

<iframe width="480" height="360" src="https://www.youtube.com/embed/xFa2_PVMeDQ" frameborder="0" allowfullscreen></iframe>

Как вставить несколько видео YouTube

Для того, чтобы снизить время загрузки страницы, а форму просмотра сделать более эстетичной на место, где мы хотели бы видеть наше видео [для Blogger, при редактировании или написании сообщения, нужно перейти на вкладку "HTML"], добавляем код:

<style>
#video12 {
  position: relative;
  margin-bottom: 110px;
  padding-bottom: 75%;
}
#video12 iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}
#video12 div {
  position: absolute;
  bottom: -110px;
  width: 100%;
  height: 100px;
  padding: 0;
  overflow-x: auto;
  white-space: nowrap;
  text-align: center;
}
#video12 img {
  height: calc(100% - (5px + 1px)*2 - 10px);
  margin: 0 5px 0 0;
  padding: 5px;
  border: 1px solid #555;
  border-radius: 5px;
  opacity: .7;
}
#video12 img:hover {
  opacity: 1;
  cursor: pointer;
}
#video12 img:focus {
  opacity: .2;
}
</style>

<div id="video12">
  <iframe src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>
  <div>
    <img src="http://img.youtube.com/vi/xFa2_PVMeDQ/1.jpg" tabindex="2" data-start="32" data-end="60"/>
    <img src="http://img.youtube.com/vi/hSrOpTYKNMw/1.jpg" tabindex="2"/>
    <img src="http://img.youtube.com/vi/WFhzzJjRncI/1.jpg" tabindex="2"/>
  </div>
</div>

<script>
var IMG = document.querySelectorAll('#video12 img'),
    IFRAME = document.querySelector('#video12 iframe');
for (var i = 0; i < IMG.length; i++) {
  IMG[i].onclick = function() {
    var idIMG = this.src.replace(/http...img.youtube.com.vi.([\s\S]*?).1.jpg/g, '$1');
    IFRAME.src = 'http://www.youtube.com/embed/' + idIMG + '?rel=0&autoplay=1';
    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
    this.style.backgroundColor='#555';
  }
}
</script>
, где xFa2_PVMeDQ — идентификатор ролика. Где его взять? Посмотрите на первый скриншот, он выделен синим цветом. И вот статья как сделать картинки-миниатюры на видео (они же превью) Ютуб.

Что умеет скрипт

  1. превью текущего видео делает затемнённым.
  2. у превью просмотренного ролика появляется серая рамка благодаря this.style.backgroundColor='#555';.
  3. при большом количестве изображений будет возможность их прокручивать (как ещё можно сделать).
  4. если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите &autoplay=1.
  5. ежели надо, чтобы ролик начался с определённого момента (как сделать), то следует добавить в тег img data-start="32". Вместо 32 поставить своё значение в секундах.
  6. коли хочется, чтобы видео воспроизводилось до какого-то момента, то необходимо внести data-end="60". Вместо 60 написать своё значение в секундах.
  7. резиновый, растягивается на всю ширину, поэтому не нужно рассчитывать размеры отдельно для каждой области.
  8. если больше интересно вертикальное размещение изображений, то стиль может быть таким:
    <style>
    #video12 {
      position: relative;
      padding-bottom: 75%;
    }
    #video12 iframe {
      position: absolute;
      width: calc(100% - 120px);
      height: calc(100% - 120px*3/4);
    }
    #video12 div {
      position: absolute;
      top: 0;
      right: 0;
      width: 110px;
      height: 100%;
      padding: 5px;
      overflow-y: auto;
    }
    #video12 img {
      width: calc(100% - (5px + 1px)*2);
      padding: 5px;
      border: 1px solid #555;
      border-radius: 5px;
      opacity: .7;
    }
    #video12 img:hover {
      opacity: 1;
      cursor: pointer;
    }
    #video12 img:focus {
      opacity: .2;
    }
    </style>

Несколько видео с текстом "серия 1"

Внешний вид самый простецкий, его нужно изменить согласно дизайну сайта.

серия 1 серия 2 серия 3
<style>
#video12 {
  position: relative;
  padding-bottom: 75%;
}
#video12 iframe {
  position: absolute;
  width: calc(100% - 5em);
  height: 100%;
}
#video12 div {
  position: absolute;
  top: 0;
  right: 0;
  width: 5em;
  height: 100%;
  overflow-y: auto;
}
#video12 span {
  display: block;
  text-align: center;
}
#video12 span:hover {
  color: #ff3200;
  cursor: pointer;
}
#video12 span:focus {
  color: blue;
}
</style>

<div id="video12">
  <iframe src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>
  <div>
    <span data-video="xFa2_PVMeDQ" tabindex="0">серия 1</span>
    <span data-video="hSrOpTYKNMw" tabindex="0">серия 2</span>
    <span data-video="WFhzzJjRncI" tabindex="0">серия 3</span>
  </div>
</div>

<script>
var IMG = document.querySelectorAll('#video12 span'),
    IFRAME = document.querySelector('#video12 iframe');
for (var i = 0; i < IMG.length; i++) {
  IMG[i].onclick = function() {
    IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
    this.style.backgroundColor='rgba(0,0,0,.2)';
  }
}
</script>

HTML код ролика YouTube: расширенные возможности URL-адреса

Из предложенного кода следует взять идентификатор видеоролика, добавить его в форму ниже и настроить под свои нужды [см. допустимые параметры]:

<iframe width="480" height="360" src="https://www.youtube.com/embed/xFa2_PVMeDQ" frameborder="0" allowfullscreen></iframe>
Внешний вид
?
?
?
?
?
?





в f t
наверх ↑

82 комментария:

Tigra
Вы такая умная!спасибо вам за ваш блог!
Я тему даже на блоге не могу настроить( может подскажите что не так?если есть свободная минутка...
NMitra
Давайте посмотрим. Только профиль закрыт, поэтому я не вижу блога.
Ал
Каждый школьник знает о таком
Al Kapone
В видео похож на Майкла Корлеоне из фильма "Крестный отец"
Mike K
кстати немного потанцевал с бубном, чтобы видео могли смотреть и с Ios и других устройств, которые не поддерживают флеш, результат:
Mike K
(div id="containerYT">
(iframe width="560" height="315" src="http://www.youtube.com/embed/m24IuebMXPo" frameborder="0" allowfullscreen>(/iframe>(/div>
(script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/m24IuebMXPo&enablejsapi=1&rel=0&fs=1',
'containerYT',
'425','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});

function cargarVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
(/script>
Mikhail
Спасибо, видео я установил, но оно нехорошо сливается с фоном, нельзя ли как нибудь рамочку приладить?
NMitra
Если путём скрипта описанного выше, то:

#reproductorYT {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
border: 1px solid #555;
}

Если посредством IFRAME из YouTube, то окружите его div, например,

<div class="youtube"><iframe width="560" height="315" src="http://www.youtube.com/embed/SO4YuDAkplU" frameborder="0" allowfullscreen></iframe></div>

и к нему стиль

.youtube{
text-align: center;
padding: 1px;
border: 1px solid #555;
}

Или любой другой на ваше усмотрение.
сергей
http://www.oneshotinc.ru/video.php

не работает переключение видео, в чем может быть причина?
NMitra
Вместо

{allowFullScreen: 'true'},

добавьте

{allowScriptAccess: 'always',allowFullScreen: 'true'},

и без строки <div id="containerYT">сообщение</div> не будет работать
Анонимный
Здравствуйте, Наташа.
Спасибо за урок. А нельзя ли в Вашей конструкции сделать так, чтобы при выборе видео, страница возвращалась бы к плейеру. Например, при большом списке роликов посетителю приходиться отматывать страницу до начала, чтобы просмотреть выбранный ролик.
Спасибо.
NMitra
Думаю так:

<a href="javascript:cargarVideo('ID_N');" onClick="scrollTo(0,0); return false;"><img src="http://img.youtube.com/vi/ID_N/1.jpg" /></a>
Анонимный
Здорово! Большое спасибо. А давайте ещё поусовершенствуем. Как сделать так, чтобы ролик прокручивался с определенного момента и до определенного момента?
Спасибо.
NMitra
По моему, это уже решается на стороне YouTube.
Анонимный
У-у-у-у-у-у-у! Жалко.
Анонимный
Думаю так:

(a href="javascript:cargarVideo('ID_N');" onClick="scrollTo(0,0); return false;"><img src="http://img.youtube.com/vi/ID_N/1.jpg" /)</a)
---------------------------------------------------------------------

Здравствуйте, Наташа.
Проблемка, к плейеру то "отматывает", а вот выбранный ролик не загружается.
NMitra
Вот это работает

<a href="#" onclick="cargarVideo('ID_N'); scrollTo(0,0); return false">
Анонимный
Умничка! Спасибо.
Анонимный
Здравствуйте, Наташа.
Извените, что пишу не по теме, но уже весь инет перерыл и не нашел ничего подходящего. Подскажите возможность, как позиционировать новое окно заданных размеров (например форму регистрации) на странице в Opere? А если есть кросс-браузерная конструкция, то вообще классно.
Большое спасибо.
NMitra
Либо position: absolute;, либо position: relative. http://shpargalkablog.ru/2011/04/css-nalozhenie.html Хотя вопроса не поняла: почему именно в Опере, относительно чего позиционировать?
Анонимный
Отписался на мыло, чтобы не засорять пост.
Анонимный
А скажите, пожалуйста, как сделать, чтобы вместе с видео загружалось с его описание с Ютуба, дата публикации и т.д.?
NMitra
К сожалению, не могу сказать, обратитесь к разработчику скрипта.
Анонимный
Кто разработчик скрипта?
NMitra
http://911-need-code-help.blogspot.com/ В статье ссылка на пост.
Игорь
Скажите пожалуйста, а как можно выделить посещенные ролики в списке от непосещенных (например изменить цвет рамки), чтобы посетителю было проще ориентироваться. Всяко пробовал, чет не получается.
Спасибо.
NMitra
После скрипта замените код, например на такой:

<div class="videominiaturas"><img src="http://img.youtube.com/vi/xFa2_PVMeDQ/1.jpg" onclick="cargarVideo('xFa2_PVMeDQ'); this.style.backgroundColor='#555'; return false"/><img src="http://img.youtube.com/vi/hSrOpTYKNMw/1.jpg" onclick="cargarVideo('hSrOpTYKNMw'); this.style.backgroundColor='#555'; return false"/><img src="http://img.youtube.com/vi/WFhzzJjRncI/1.jpg" onclick="cargarVideo('WFhzzJjRncI'); this.style.backgroundColor='#555'; return false"/></div>

this.style.backgroundColor='#555' - меняет фон картинки.
Mikhail Yutkin
Вставлял код в страницу редактирования стандартного материала Joomla. Вставилось удачно, но не работает переключение ролликов под основным главным роликом. т.е. как я понял я не сумел подключить script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> script правильно.
В html редакторе материала нету тега 'head' и если эту строку просто вставлять вначале кода, то она затирается и естественно скрипт не подхватится.

Подскажите, что делать? Если нужно вставить эту строчку в какой-то локальный файл, то в какой? Спасибо
NMitra
Есть более простой вариант без подключения библиотек

<iframe src="http://www.youtube.com/embed/KMZZBoSKP2c?rel=0" allowfullscreen="" frameborder="0" id="video12"></iframe>
<div style="text-align: center; margin-top: 2px;">
<a href="#" onclick="document.getElementById('video12').src='http://www.youtube.com/embed/KMZZBoSKP2c?rel=0';return false;"><img src="http://img.youtube.com/vi/KMZZBoSKP2c/1.jpg" /></a> <a href="#" onclick="document.getElementById('video12').src='http://www.youtube.com/embed/O0pqugrjzhs?rel=0';return false;"><img src="http://img.youtube.com/vi/O0pqugrjzhs/1.jpg" /></a> <a href="#" onclick="document.getElementById('video12').src='http://www.youtube.com/embed/bVOOB_Q0MZY?rel=0';return false;"><img src="http://img.youtube.com/vi/bVOOB_Q0MZY/1.jpg" /></a></div>

Принцип тот же. Пример, http://shpargalkablog.ru/2012/11/perelinkovka.html
Alex Zest
А скрипт зачем подключается,
-- достаточно вставить - то что считывается при клике правой мышей - под пунктом
"Copy embed html" - или такой же записью на национальном языке
---------------------
в случае ее отсутствия можно просто вставить ссылку через тег embed с указанием на исполняемый MIME-тип плэйеру
NMitra
О, я так с MIME-тип и не разобралась. Ссылку в студию с работающем примером. )))
Анонимный
А для чего такая сложность если можно просто в страницу HTML вставить код например нужно только в начале открыть а в конце закрыть тег айфрэйм width="600" height="480" src="http://www.youtube.com/embed/M973nToRmjo" frameborder="0" ссылку на видео замените на свою и всё вот пример http://flinders.ru
NMitra
Никакой сложности. Именно тот код, который вы написали и предлагает сам YouTube. Но, когда видео несколько, то мне больше импонирует объединить их вышеприведённым способом.
Анонимный
Здравствуйте, Наташа. Скажите как вставить в видио с HTML кодом код своей странички чтоб после просмотра видио сразу открывалась регистрация
NMitra
Здравствуйте, можно таймер подключить. И, скажем, по прошествии 2 минут убирать IFRAME и добавлять форму регистрации.
Анонимный
а можно этот код переделать так чтоб выглядел как здесь? : http://buxodrom.blogspot.com/2014/01/vk.html
NMitra
Я вас поняла, позже посмотрю.
NMitra
Сделала, см. статью.
Анонимный
Подскажите пожалуйста, как это будет выглядеть, если нужно несколько таких списков на странице.
Анонимный
Здравствуйте. Спасибо за урок. Подскажите, а как сделать так, чтобы вместо скринов ютуба, в маленьких окошках, можно было загрузить свои картинки. Как и что добавить? Спасибо.
NMitra
Анонимный №1,

Чтобы прописать стиль один раз <div id="video12"> нужно заменить на <div id="video12" class="video12">
В стилях вместо #video12 применить .video12

Тогда следующий блок будет <div id="video13" class="video12"> Затем <div id="video14" class="video12">

Скрипт

<script>
var IMG = document.querySelectorAll('[id^="video1"] span');
for (var i = 0; i < IMG.length; i++) {
IMG[i].onclick = function() {
var IFRAME = this.parentNode.previousElementSibling;
IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
this.style.backgroundColor='rgba(0,0,0,.2)';
}
}
</script>
NMitra
Здравствуйте, Анонимный №2
См. последний пример, только вместо "серия 1" пишите код своей картинки
Женя
Добрый день, подскажите пожалуйста как сделать так: есть ссылка простая (больше ничего не видно - iframe или div - display:none;)
при нажатии на ссылку - появлялся бы блок с видео и автоматом начинал проигрываться.
получается только спрятать бок и проявить его по нажатию. но проблема в том, что он когда "none" все равно начинает проигрываться сам, хоть его и не видно. а если убрать autoplay то приходится после появления блока дополнительно тыкать на play (((
спасибо
NMitra
Добрый день,
вариант 1 http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html (см. для YouTube)
вариант 2 http://shpargalkablog.ru/2014/01/pause-youtube.html
Анонимный
а как скачать ролик себе на комп ьютер ? подскажи
NMitra
Попробуйте http://ru.savefrom.net
Анонимный
Здраствуйте. Не подскажете почему при смене картинок ролика с 1.jpg на любое другое (например 2.jpg) видео не загружается?
NMitra
Здравствуйте, изменить эту строку

var idIMG = this.src.replace(/http...img.youtube.com.vi.([\s\S]*?).1.jpg/g, '$1');
Анонимный
Но если у меня несколько видео и в каждом я хочу указать разную картинку. В одном первую в другом вторую. Как указать ето в переменной?
NMitra
Передавать id не через URL картинки, а через data-video="" как это сделано в примере с текстом ниже. И там и там скрипт один.
Анонимный
Огромное спасибо!
Анонимный
Доброго времени суток у меня такой вопрос как можно сделать ротатор своих видео с ютуба (своего канала )на свой сайт что бы при каждой загрузке (перезагрузке)одной и той же страницы в одном и том же месте показывалось ДРУГОЕ видео ?
NMitra
Здравствуйте,
можно рандомом добавлять из списка выбранных вами видео

<script>
var image=new Array(12);
image[0]="xFa2_PVMeDQ";
image[1]="hSrOpTYKNMw";
image[2]="WFhzzJjRncI";
image[3]="JMJXvsCLu6s";
var alea=Math.round(Math.random()*3);
document.write('<iframe src="http://www.youtube.com/embed/' + image[alea] + '?rel=0" allowfullscreen="" frameborder="0"></iframe>');
</script>

Наверняка есть более расширенный вариант, но нужно читать документацию. Можно ведь поиск по своему каналу сделать http://shpargalkablog.ru/2011/08/poisk-youtubecom.html
Unknown
Спасибо, черт возьми :))).
Кстати, сложно ли реализовать скрипт для просмотра фоток с видео, то есть при нажатии на миниатюру что бы показывалась фотка ?
NMitra
Что-нибудь типа этого?
http://shpargalkablog.ru/2014/02/gallery.html
http://shpargalkablog.ru/2013/01/gallery-foto.html
Антон Благов
Неееет, я запилил форму на сайт, которая позволяет выбирать видео, а можно ли переделать js так, что бы в iframe вставлялось и видео и простые фотки ?
Антон Благов
То есть в одной строке видео из ютуба и фото из сайта
Антон Благов
http://joombra.ru/details.php - вот ссылка на сайт, если нужно будет глянуть.
Антон Благов
Я пытался поправить js, но так и не добился чтоб в iframe вставлялись и изображения и видео с youtube по клику
Антон Благов
Единственный способ, который я придумал - это передавать на 2 наложеных друг на друга обертки ютубаи фота display:block и none, то есть при нажатии на маленькое окошко с фото, скрывать фрейм видео и наоборот, но это такой кастыль...
NMitra
Я всё равно не понимаю что нужно сделать: через iframe картинки тоже можно показывать (с высотой и длинной только нужно определиться):

<iframe src="//img.youtube.com/vi/xFa2_PVMeDQ/mqdefault.jpg" allowfullscreen="" frameborder="0"></iframe>

И зачем накладывать на iframe картинку: если человек щелкнул по миниатюре, то он планирует посмотреть следующее видео, а не картинку к нему. Скорость загрузки не станет выше, если ему сначала предлагать картинку на последующие видео. Только при загрузке всей страницы это важно.
Антон Благов
Смотрите, есть iframe, в который мы подпихиваем видео, которые выбираются в миниатюре, так вот, я хотел сделать так, что бы в миниатюрах были и фото и видео, то есть если мы кликаем по миниатюре Youtube - открывается видео, если мы кликаем по миниатюре с фоткой из сайта, то просто открывается фотка.
NMitra
А теперь понятно :) Разбейте (отделите) классами картинки от видео, например, так (по середине картинка): http://jsfiddle.net/NMitra/60wv1czn/
Антон Благов
Разбил, сделал, вставил картинку со своего сайта, в итоге в iframe появилось вот что
http://joombra.ru/img/trouble.PNG
Антон Благов
Можно ли через js, если класс - img, не слать в iframe ссылку на youtube ?
Антон Благов
Допилил, если кому будет нужно - просто вставляете IFRAME.style.backgroundImage = 'url(' + idIMG + ')'; предпоследней строчкой и в img с классом img можно пихать свои изображения.
Антон Благов
IFRAME.style.backgroundImage = 'url(' + idIMG + ')'; вместо IFRAME.style.backgroundImage = 'url(//img.youtube.com/vi/' + idIMG + '/0.jpg)';
NMitra
Всё верно
Антон Благов
Огромное спасибо !!!
Борис
Добрый день! У меня такая проблема - очень понравился модуль с множественным видео в горизонтальном расположении,но никак не могу настроить его так, чтобы изображение было 60% по высоте и ширине и при этом располагалось по центру и отступ от маленьких превью не был огромен....попробовал сам и ничего не вышло...на бутсрапе битрикса он вообще при изменениях не хочет адаптироваться...уезжает куда -то. Сможете помочь?
NMitra
Здравствуйте,

#video12 {
position: relative;
margin-bottom: 110px;
padding-bottom: 60%; /* высота */
}
#video12 iframe {
position: absolute;
width: 60%;/* ширина */
height: 100%;
left: 20%;/* по центу */
}
Unknown
на это
var IMG = document.querySelectorAll('#video12 span'),
IFRAME = document.querySelector('#video12 iframe');
ругаются старые движки, например при интеграции ссылок на страницу с этим отображение в софт
Фиксится так:
1 подключением JQuery
2 var IMG = $('#video12 img'),
IFRAME =$('#myvframe');
3 IFRAME.attr('src', '//www.youtube.com/embed/' + idIMG + '?rel=0&autoplay=1');
NMitra
Скоро не будут, у меня таких посетителей менее 1% :)
Анонимный
Как на странице реализовать вывод нескольких видео с разделами (каждый с вертикальным меню)? Используя два скрипта, изображения меню перового раздела выводятся во втором скрипте.
NMitra
Нужно использовать не ID, а CLASS. На следующей недели перепишу статью, чтоб было проще, без скрипта, только на HTML.
akula-z
Насколько я понимаю, этот скрипт подходит только для добавляения видео с Ютую? То есть, добавить другой фрейм с видео (с иного источника), я не смогу?
NMitra
Следующей статьёй планирую дать код, который можно применить к любому IFRAME
akula-z
Ох,поскорей бы эта статья вышла...
Денис Шадрин
А как можно сделать автозапуск ютуб видео без звука? Также интересует как растянуть ютуб видео на всю ширину сайта? Как фоном сделать я знаю, интересно именно растянуть по ширине, но не по высоте.
NMitra
При помощь API https://developers.google.com/youtube/js_api_reference#Playback_controls

Отключить громкость:
player.mute();

На всю ширину сайта:
width: 100%;

Пример:

<style>
#Youtube {
width: 100%;
height: 20em;
}
</style>
<script src="//www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('Youtube', {
events: {'onReady': onPlayerReady}
});
}
function onPlayerReady(event) {
player.mute();
}
</script>
<iframe src="//www.youtube.com/embed/JMJXvsCLu6s?rel=0&enablejsapi=1&autoplay=1" frameborder="0" allowfullscreen id="Youtube"></iframe>

Демонстрация:
https://jsfiddle.net/NMitra/u7g252yx/1/
Артур Солодухин
Доброго времени суток! А можно как то переделать скрипт,чтобы видеоролик показывался вместо кнопки по которой кликнули,а до клика его не было бы видно.И чтобы размер видео адаптировался к любым разрешениям экрана.
NMitra
Доброго времени суток. Не поняла, большое видео тогда не нужно? Вместо скрипта я советую HTML http://shpargalkablog.ru/2016/05/gallery-videos.html#videoslider-right-img А примеры все адаптируются, без фиксированного размера.