У меня есть веб-сайт, включающий множество встроенных видеороликов YouTube; в настоящее время они загружаются одновременно, что, конечно, заставляет сайт работать очень медленно при первоначальной загрузке.
Каков наилучший способ загрузки изображения в качестве заставки/заставки вместо видеоизображения iframe?
Изображение нужно будет заменить на YouTube iframe только при нажатии (это должно быть загружено только по запросу), что значительно уменьшает размер файла сайта. Я уже нашел некоторые подобные вопросы, но они, похоже, рекомендуют использовать CSS и jQuery для изменения видимости видео. Это не работает в этом случае, потому что видеоплеер будет по-прежнему загружаться в фоновом режиме.
Я ценю любую помощь/предложения.
Это должно быть довольно прямолинейно, попробуйте что-то вроде этого:
<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-адрес, если вы хотите, чтобы они воспроизводились при щелчке изображения.