.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;
}
});