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

• Добавить поиск YouTube на сайт
• Как встроить Ютьюб в Blogger: иконка

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

На странице показа ролика нажать на "Поделиться" — "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>

Поменять:

Внешний вид

Показать панель управления ?
Показать название видео и функции проигрывателя ?
Показать аннотацию ?
Показать логотип YouTube (без названия показан водяной знак, который нельзя убрать) ?
Показать кнопку полноэкранного режима ?
Светлая панель управления ?

Показать похожие видео после завершения просмотра
Автоматическое воспроизведение
Воспроизведение по кругу
Показать титры по умолчанию
YouTube собирает статистику только о посетителях сайта, посмотревших видео