Комментарий http://shpargalkablog.ru/2011/01/youtube.html#c7528441315386651392

by vitalsone

HTML

<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" class="video"/>
    <img src="http://img.youtube.com/vi/hSrOpTYKNMw/1.jpg" tabindex="2" class="img"/>
    <img src="http://img.youtube.com/vi/WFhzzJjRncI/1.jpg" tabindex="2" class="video"/>
  </div>
</div>

CSS

#video12 {
  position: relative;
  margin-bottom: 110px;
  padding-bottom: 75%;
}
#video12 iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#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;
}

JavaScript

var IMG = document.querySelectorAll('#video12 img.video'),
    IMG1 = document.querySelectorAll('#video12 img.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';
  }
}
for (var i = 0; i < IMG1.length; i++) {
  IMG1[i].onclick = function() {
    var idIMG = this.src.replace(/http...img.youtube.com.vi.([\s\S]*?).1.jpg/g, '$1');
    IFRAME.src = '';
    IFRAME.style.backgroundImage = 'url(//img.youtube.com/vi/' + idIMG + '/0.jpg)';
    this.style.backgroundColor='#555';
  }
}