Подтвердить что ты не робот

Как добавить образ заставки/заполнитель для видео YouTube

У меня есть веб-сайт, включающий множество встроенных видеороликов YouTube; в настоящее время они загружаются одновременно, что, конечно, заставляет сайт работать очень медленно при первоначальной загрузке.

Каков наилучший способ загрузки изображения в качестве заставки/заставки вместо видеоизображения iframe?

Изображение нужно будет заменить на YouTube iframe только при нажатии (это должно быть загружено только по запросу), что значительно уменьшает размер файла сайта. Я уже нашел некоторые подобные вопросы, но они, похоже, рекомендуют использовать CSS и jQuery для изменения видимости видео. Это не работает в этом случае, потому что видеоплеер будет по-прежнему загружаться в фоновом режиме.

Я ценю любую помощь/предложения.

4b9b3361

Ответ 1

Это должно быть довольно прямолинейно, попробуйте что-то вроде этого:

<img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">
$('img').click(function(){
    var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});

Демо: http://jsfiddle.net/2fAxv/1/

Для видеороликов youtube добавьте &autoplay=1 в URL-адрес, если вы хотите, чтобы они воспроизводились при щелчке изображения.