Как узнать ссылку на изображение с видео из youtube

В последнее время все чаще можно увидеть как ролики с youtube появляются практически на любом сайте. Как вставлять код, я думаю, вы прекрасно знаете, но, как вставить превью картинку из видео немного не очевидно.

Ссылка на картинку из видео с youtube

Вы уже читали как cделать ролики из ютуба адаптивными, а теперь подумаем как еще мы можем их расположить на нашем сайте. А зачем вообще это нужно?

Если вы просто вставите код из youtube на свой сайт, то при загрузке сайта у вас будет подгружаться информация с сайта ютуба, при помощи iframe, что уже не есть гуд. Один из способов как это можно обойти — сделать ссылку на изображения из этого видео, а при нажатии открывать всплывающее окно. Но, тут важен один момент, не нужно менять шило на мыло — всплывающее окно должно загружаться только при клике, а не заранее вместе со всем сайтом где-нибудь в футере спрятанным при помощи стилей.

Для такой задачи лично я использую старый добрый fancybox (сейчас версии 2.0) — он позволит нам загружать видео только по клику. После подключения библиотек в свой сайт, вам всего лишь необходимо прописать такой код:

где .video-frame a — ваш селектор для ссылок.

HTML:

где 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 🙂 .

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.com/dmitriy/.

Какие услуги предоставляю:
- Создание сайтов, шаблонов и компонентов на 1С-Битрикс;
- Разработка функционала с нуля и доработка кода на уже созданных проектах;
- Адаптивная вёрстка макетов и натяжка на Битрикс;
- Парсинг файлов и выгрузка на сайт (форматы - CSV, XML, XLSX, JSON)
- Интеграции со сторонними сервисами по API;
- Многоязычные версии и многое другое.

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *