Просто посмотрите на источник. это просто HTML. У него есть видео на YouTube в iframe, а вокруг миниатюр есть тег <a>
с атрибутом target =, заставляющий ссылку изменять iframe.
В качестве альтернативы, вы можете встроить видео на страницу и использовать javascript (и jquery, если вы хотите, чтобы это было проще), чтобы изменить код для вставки, когда вы нажимаете на миниатюры. Этот метод, вероятно, будет лучше и проще.
Перейдите на страницу YouTube для каждого видео, нажмите «поделиться», затем «встроить» и скопируйте HTML.
Пока вы там, сделайте скриншот. Обрезать / изменить размер, чтобы сделать видео миниатюру.
Для видео по умолчанию (которое воспроизводится / отображается перед нажатием миниатюры) вставьте полный код встраивания (из шага 1) на свою страницу. добавьте это к тегу <iframe>
: id="video_player"
Для других видео поместите миниатюру изображения на страницу как обычно, а затем добавьте тег <a>
вокруг изображения следующим образом: <a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false">
(за исключением того, что, конечно, вам нужно исправить URL-адрес с помощью один код для вставки этого видео
Если у вас его еще нет, добавьте jquery на свою страницу. Это означает добавление к тегу <head>
следующего кода: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>