В последнее время все чаще можно увидеть как ролики с youtube появляются практически на любом сайте. Как вставлять код, я думаю, вы прекрасно знаете, но, как вставить превью картинку из видео немного не очевидно.
Ссылка на картинку из видео с youtube
Вы уже читали как cделать ролики из ютуба адаптивными, а теперь подумаем как еще мы можем их расположить на нашем сайте. А зачем вообще это нужно?
Если вы просто вставите код из youtube на свой сайт, то при загрузке сайта у вас будет подгружаться информация с сайта ютуба, при помощи iframe, что уже не есть гуд. Один из способов как это можно обойти – сделать ссылку на изображения из этого видео, а при нажатии открывать всплывающее окно. Но, тут важен один момент, не нужно менять шило на мыло – всплывающее окно должно загружаться только при клике, а не заранее вместе со всем сайтом где-нибудь в футере спрятанным при помощи стилей.
Для такой задачи лично я использую старый добрый fancybox (сейчас версии 2.0) – он позволит нам загружать видео только по клику. После подключения библиотек в свой сайт, вам всего лишь необходимо прописать такой код:
<script> $('.video-frame a').fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { media : {} } }); </script>
где .video-frame a – ваш селектор для ссылок.
HTML:
<div class="video-frame"> <a href="https://www.youtube.com/watch?v=neci-EYPqZE"> <img src="http://img.youtube.com/vi/neci-EYPqZE/mqdefault.jpg" alt=""> </a> </div>
где mqdefault как я понимаю что-то вроде medium quality
а neci-EYPqZE – код вашего видео, сейчас он прописывается через ?v=…
Кроме этого есть такие варианты (просто замените mqdefault.jpg):
- maxresdefault.jpg
- sddefault.jpg
- hqdefault.jpg
- default.jpg
- 0.jpg
- 1.jpg
- 2.jpg
- 3.jpg
Цифры соответственно кадры из видео, больше 4 недоступны для загрузки (0 тоже считается 🙂 ).
Какой из этих способов применять на своем сайте или сайте заказчика выбирать вам (или ему). Браузеры сейчас настолько быстрые, что все эти вопросы оптимизации имеют место быть лишь в больших проектах, а для получения обычной картинки из ютуба нам по сути не нужно ничего кроме HTML 🙂 .
Выложили бы тут пример. У меня почему то в итоге при нажатии на картинку переходит на ютуб. А хотелось бы чтоб не уходить с сайта.
В данном примере не рассказывается как реализовать показ видео в попапе. Лично мне нравится использовать для этих целей fancybox 🙂
Ссылка на документацию: https://fancyapps.com/fancybox/3/docs/#video