Question

Справа картинки видео, при нажатии на них происходит воспроизведение видео на экране, которые побольше, благодаря этому можно выбирать видео для просмотра. Как мне это реализовать на своём сайте? Адрес сайта на котором я это увидел: http://euroresurs.ru/video-o-nashej-produktsii.html

Хочу добавить видео на мой сайт указанный ниже.

Comments

Не копируйте ссылку на видео из адресной строки youtube.

Чтобы взять ссылку на видео нажмите на кнопку Поделиться (сразу под видео). Далее переключитесь на вкладку HTML-код. Копируете ссылку из тега src и вставляете ее на сайт. Т.е. ссылка должна быть вида

https://www.youtube.com/embed/T1f2l8hmk5M, а не http://www.youtube.com/watch?v=T1f2l8hmk5M

Answer 1

Добавьте вашим ссылкам (маленьким картинкам) какой-нибудь класс, например vframe. Т.е. будет выглядеть примерно так:

<a class="vframe" href="//www.youtube.com/embed/2BfHFmCBuRc"><img src="http://euroresurs.ru/media/k2/preview/effe6f04c5a7eb5aae40b9d939882914.jpg" width="105" alt="Испытания огнезащитной мастики «МТО»" border="0"></a>

И вешаем на эту ссылку обработчик, который ставим перед </body>

<script>
$(document).ready(function() {
  $('.vframe').on('click', function (event) {
    event.preventDefault();
    var url = $(this).attr('href');
    $('.main_video iframe').prop('src', url);
  });
});
</script>