Переключение встроенного воспроизведения видео YouTube с изображениями - PullRequest
0 голосов
/ 29 февраля 2012

Я хочу иметь встроенное видео на YouTube с несколькими изображениями под ним, которые соответствуют различным видео на YouTube.Я хочу настроить его таким образом, чтобы при нажатии на изображение вышеприведенное видео изменялось на то, которое соответствует изображению, на которое щелкнули.Реализацию этого можно увидеть здесь: http://www.seanhayesmusic.com/2012/media/

Я пытаюсь внедрить это в WordPress сайт, и у меня действительно есть только навыки в HTML и CSS.Я был бы очень признателен, если бы кто-нибудь мог помочь мне с кодом для этого!

1 Ответ

0 голосов
/ 29 февраля 2012

Просто посмотрите на источник. это просто HTML. У него есть видео на YouTube в iframe, а вокруг миниатюр есть тег <a> с атрибутом target =, заставляющий ссылку изменять iframe.

В качестве альтернативы, вы можете встроить видео на страницу и использовать javascript (и jquery, если вы хотите, чтобы это было проще), чтобы изменить код для вставки, когда вы нажимаете на миниатюры. Этот метод, вероятно, будет лучше и проще.

  1. Перейдите на страницу YouTube для каждого видео, нажмите «поделиться», затем «встроить» и скопируйте HTML.

  2. Пока вы там, сделайте скриншот. Обрезать / изменить размер, чтобы сделать видео миниатюру.

  3. Для видео по умолчанию (которое воспроизводится / отображается перед нажатием миниатюры) вставьте полный код встраивания (из шага 1) на свою страницу. добавьте это к тегу <iframe>: id="video_player"

  4. Для других видео поместите миниатюру изображения на страницу как обычно, а затем добавьте тег <a> вокруг изображения следующим образом: <a href="#" onclick="$('#video_player').attr('src', 'http://www.youtube.com/embed/paPT5qxM9m0'); return false"> (за исключением того, что, конечно, вам нужно исправить URL-адрес с помощью один код для вставки этого видео

  5. Если у вас его еще нет, добавьте jquery на свою страницу. Это означает добавление к тегу <head> следующего кода: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...