Показать сообщение отдельно
  #8 (permalink)  
Старый 10.01.2016, 17:13
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

.video {
   cursor: pointer;
   height: 100px;
   width: 150px;
}
.videobox iframe {
   border: none;
   height: 480px;
   width: 640px;
}


<div class="videobox"></div>

<img class="video" data-video="ссылка на видео 1" src="img-1.jpg">
<img class="video" data-video="ссылка на видео 2" src="img-2.jpg">
<img class="video" data-video="ссылка на видео 3" src="img-3.jpg">
<img class="video" data-video="ссылка на видео 4" src="img-4.jpg">
<img class="video" data-video="ссылка на видео 5" src="img-5.jpg">


window.addEventListener('DOMContentLoaded', function() {
    var box = document.querySelector('.videobox'),
        i, videos = document.querySelectorAll('.video');

    function createFrame() {
        var frame = document.createElement('frame');
        frame.name = 'video_' + Date.now();
        frame.scrolling = 'no';
        frame.src = this.dataset.video;
        if(box.firstChild) {
            box.removeChild(box.firstChild);
        }
        box.appendChild(frame);
    };

    for(i = 0; i < videos.length; i++) {
        videos[i].onclick = createFrame;
    }
});
Ответить с цитированием