Загрузка видео You Tube на сайт

Здравствуйте!Сегодня я покажу вам как добавить видео на ваш сайт.Начну с сайта на платформе blogger и wordpress.

Wordpress:

На странице показа ролика щелкаем "Подписаться-HTML-код":

Предложенный iframe добавляем на сайт(iframe выделен).

Blogger.

Добавить видео в blogger задача не для новичка.Однако пользователи при написании статьи могут воспользоваться иконкой "Вставить видео-с 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/aQQLG2d_X6w?rel=0" allowfullscreen="" frameborder="0"></iframe>

  <div>
    <img src="http://img.youtube.com/vi/aQQLG2d_X6w/1.jpg" tabindex="2" data-start="32" data-end="60"/>
    </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>

aQQLG2d_X6w-идентификатор видеоролика.Где его взять я писал выше.Он выделен синим цветом.

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

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>

Вот и всё дорогие друзья.