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

В последнее время все чаще можно увидеть как ролики с 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 🙂 .

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

2 коментаря

  1. Выложили бы тут пример. У меня почему то в итоге при нажатии на картинку переходит на ютуб. А хотелось бы чтоб не уходить с сайта.

Залишити коментар до Владимир Скасувати коментар