Хорошего настроения всем читателям – Sozdaiblog.ru!
Сегодня Вы узнаете о том, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.
Наверняка каждый из Вас уже давно догадался, что при встраивании видеоролика с You Tube в любую страницу Вашего Веб-ресурса, существенно увеличивает время её загрузки.
Если Вы раньше этого не знали, то сейчас самое время прозреть.
Почему так происходит? Сейчас попробую пояснить.
При внедрении любого видео YouTube на Веб-сайты с использованием стандартных тегов IFRAME, сами того не ведая, Вы создаёте кучу лишних HTTP запросов (CSS, JavaSript и просмотр архивов), которые нацелены на построение и отображение стандартного ютубовского видеоплеера.
Самое обидное то, что независимо от того будет ли посетитель смотреть видео или нет, дополнительные запросы будут постоянно увеличивать время загрузки запрашиваемой страницы.
Недавно я заметил, что разработчики Google Plus нашли оригинальный подход к решению данной проблемы.
Вместо того чтобы загружать и отображать целиком весь плеер со всей его навигацией, Google показывает только эскиз видеоролика, а сверху накладывает значок воспроизведения. Вот взгляните пример их инновации:
Когда посетитель нажимает кнопку воспроизведения, отображаемое изображение превращается в стандартный проигрыватель видео. Таким образом, дополнительные ресурсы загружаются только тогда, когда пользователь решил посмотреть встроенное видео, а не как иначе.
Те, кто подписан на обновления этого блога и постоянно получает мои новые статьи, знают, что я всё время ищу и нахожу новые способы и возможности увеличения скорости загрузки сайта. Об этом свидетельствуют следующие посты:
Ускорение загрузки сайта кэшированием браузера.
11 Способов увеличить скорость загрузки сайта.
Как увеличить скорость загрузки сайта до 1 секунды.
Безопасное ускорение сайта на CloudFlare.
Как перенести изображения на поддомен.
Вот и в этот раз я снова принялся за старое, решив разгадать тайну Google Plus, чтобы узнать, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.
Как вставлять видео с You Tube эффективно.
Оказывается, что есть специальный скрипт, который необходимо скачать и закинуть в корневую папку своего Веб-ресурса.
Теперь при встраивании видеороликов в посты блога нужно воспользоваться не привычным кодом IFRAME, а представленным ниже:
<div class="youtube" id="JZioV5d3osg" style="width:400px; height:200px;"></div> <script src="https://Путь к файлу youtube.js" type="text/javascript"></script>
В принципе, здесь нет ничего сложного. Единственное на что стоит обратить внимание – это id. Вам потребуется прописать id необходимого видеоролика. Чтобы его узнать, достаточно включить просмотр в ютубе и заглянуть в адресную строку браузера.
Затем скопировать и вставить в вышеупомянутый код. Ещё в этом коде обязательно укажите путь к ранее загруженному файлу.
Кстати, друзья в архиве вместе со скриптом находится изображение кнопки воспроизведения. Её, как и скрипт, необходимо закинуть в удобное для Вас место на Вашем сервере, а в скрипте прописать к ней путь.
Место для вставки адреса картинки я пометил так – «дорога к изображению». Так Вам будет намного легче его найти. Если что, то Вам не обязательно использовать именно эту картинку. Можете вставить что-то своё. Всё ограничивается лишь Вашей фантазией.
На сегодня это всё. Удачи и до следующих постов…
С уважением, Денис Черников!
-
Виды блогов: от личных дневников до лайфстайл блогов
- Стоимость это простыми словами
- Мотивация это простыми
-
Как оптимизировать картинки для блога?
- Фауда что это значит простыми словами
- Амбассадор что это означает простыми словами
- Маркетплейс что это такое простыми
-
Как сделать мобильную версию сайта за 5 Минут?
- Как стать блоггером и зарабатывать деньги
- Sku что это такое простыми словами
По-моемому, что-то интересное. Надо дополнительно обмозговать и, наверное, применить.
Пожалуйста, применяйте!
Ай молодца! Денис! Пытливый ум! Мне это очень пригодится!
Шикарный банер сделал у себя и красиво переустроил сайт
А вот «Курс за доллар» я так и не могу посмотреть — не кликабельно или нет еще курсов?
Спасибо, Ирина!А что за проблемы с курсом? Его нужно купить сначала! Он поэтому и называется «Курс за доллар»! Инструкция по покупке в начале раздела.
Это я понимаю, что надо купить…видимо для меня не понятна была навигация. Я не ожидала, что картинка под надписью и есть тот самый курс за доллар
А вон оно что! Я не стал делать кликабельной надпись. Картинка же больше и в меню раздел есть.
Денис,я так поняла, что файл YouTube (то есть видео ролик)сначала надо скачать и закинуть себе на хостинг, А потом прописывать к нему путь?
Нет, Людмила Вы не правильно поняли! Нужно скрипт закидывать, а не видеоролик! А в кода прописать id клипа.
Заинтересовало, это действительно нужно попробовать, спасибо за материал, Денис, вечером обязательно попробую.
Пожалуйста, Михаил! Обязательно попробуйте, там всё просто!
Действительно, статья необычайно полезная! Обязательно воспользуюсь данным способом вставки видео с ютуб на блог. Спасибо за ваш труд!
Пожалуйста, Надежда! Способ надёжный, сами разработчики Гугла его используют.
Очень интересно! А разве этот скрипт не будет делать много запросов чтобы получить скрин с видео-ролика?
Да он только картинки запрашивает, а не целую визуализацию с навигацией плеера!
Очень полезная информация. Спасибо. Нужна ваша помощь: я не могу прописать путь к файлу на сервере. Этот файл закидывать в архиве или разархивировать? Приведите, пожалуйста, пример такого пути.
Пожалуйста! Конечно, архив нужно распаковать, а файл закинуть на сервер! А путь — это просто адресная ссылка. Обычно через ftp клиента можно легко посмотреть.
Попыталась сделать… не очень понятно…
А именно что надо (адрес чего… какой картинки?) вставить тут «http://Путь к файлу youtube.js» И поконкретнее, куда определить изображение кнопки воспроизведения. Приведите реальный пример, чтобы по аналогии можно было бы сделать.
Ирин, в http: //Путь к файлу youtube.js прописывается путь к файлу youtube.js, который находится в скаченном архиве и который Вы закидываете на свой сервер в любое удобное место корневой папки. Изображение определяйте куда угодно, хоть вместе с ранее загруженным файлом закидывайте, только в скрипте (файле) пропишите путь к изображению.
У меня получился такой путь http:// babairisha.ru/public_html/youtube/youtube.js Это правильно? Изображения нет почему-то никакого.
Ирина, Вы сейчас мне показали путь к файлу «youtube.js»! При чём тут изображение? Ирин, Вы закидываете картинку на свой сервер и копируете её путь, к примеру http:// babairisha.ru/public_html/youtube/картинка.png! Затем, открываете «youtube.js», находите «дорога к изображению» и вставляете туда «http:// babairisha.ru/public_html/youtube/картинка.png». В самом коде, который Вы будите вставлять в статью, вместо «http:// Путь к файлу youtube.js» вставляете Ваш «http:// babairisha.ru/public_html/youtube/youtube.js».
Ура! Все получилось! Огромное спасибо Вам, Денис.
Пожалуйста, Николай! Рад за Вас! Заходите.
Здравствуйте, Денис! А где же скрипт для скачивания — его не видно что-то. И еще — в коде для вставки заданы ширина и высота. Их менять можно? а можно указывать только ширину чтоб не нарушались пропорции или надо все высчитывать?
Здравствуйте, Daria! А Вы попробуйте на синюю кнопочку нажать!!! Размеры можно менять по-своему желанию и усмотрению.
Привет Денис! Выходит, нужно скопировать ваш этот скрипт к себе и сохранит?
Привет, Vadar! Срипт нужно скачать и закинуть на хостинг, а вот код необходимо скопировать и вставить в статью изменив описанные в посте места!
Поставил себе на блог, прикольно. У меня адаптивный шаблон, пришлось еще в css лезть, чтобы все это прорезинить.
Жаль, что к видео, добавленному на блог ранее, нельзя комплексно применить этот скрипт, а редактировать каждый пост нет времени и желания. Ну и ладно, буду к новым применять. Спасибо Денис.
Пожалуйста, Сергей! Конечно, комплексно заменить не получится все, но зато теперь Вы уже во всеоружии.
Еще хочу добавить на счет скорости загрузки страницы, понимаю,что в теории страница должна грузиться быстрее, но на практике к сожалению разницы я не заметил. Думаю если на странице несколько видео, тогда результат будет ощутим. А идея хорошая, по крайней мере теперь у видео вид немного другой, не как у большинства блогеров.
Помните, Сергей поговорку — Курочка по зёрнышку? Там убрали лишнее, потом в другом месте, а в совокупности время загрузки уменьшилось. Вы это не заметите, а поисковые роботы видят всё.
Да я и не спорю, конечно изменения в скорости есть, не зря же этот скрипт придумывали. Как я понял грузится только картинка, а все причиндалы плеера уже после клика,по любому должно быть быстрее.
Вы всё правильно поняли, Сергей! Применяйте!
Спасибо, Денис! Давно хочу все, что можно перевести на код, чтобы увеличить скорость.Твоя статья, как специально кстати. Даже удивлен, что и в видео можно использовать технологии повышения скорости через код.
Пожелание, не все разбираются в кодах хорошо.Давай всегда пример для подражания.
Пожалуйста, Геннадий!
Да, на код можно перевести практически всё!
Я сам некоторое время назад вообще понятия не имел, как создаются сайты и про вёрстку ничего не слышал. Я ни где этому не обучался и всё постигал сам, каждый раз набиваю новые шишки. Если я могу кому-то послужить примером, то я только за! Кстати, спасибо за пожелания и с праздником Вас!
Денис, у меня вопрос по теме. Как устранить такой недостаток: дело в том,что после очередного редактирования поста и его обновления видеоролик исчезает и приходится его опять ставить.
Николай, всё дело в тупом визуальном редакторе, который просто уже задрал. При переключении с HTML все коды постоянно слетают, поэтому так и происходит. Если разбираетесь в коде, то лучше его отключить, если нет, то основной материал редактируйте визуально, а в конце проставляйте все коды в HTML и сохраняйтесь. После этого в визуальный редактор не заходите, а если зайдёте, то там не сохраняйтесь!
Хорошая штука. Обязательно воспользуюсь!
Пользуйтесь, Вам понравится!
Это я один не вижу ссылку на скачивание скрипта?
Вы посоветовали Daria нажать на синюю кнопку, а мне куда нажать?
После какого она абзаца стоит? Может, слетела после редактирования?
Большая синяя кнопка!
Денис, я опять с благодарностью. У меня всё получилось очень и очень просто. Да ещё и лишний плагин теперь можно отключить!
Большущее спасибо!
Пожалуйста, Юлия! Стараюсь рассказывать всё просто, чтобы у любого получилось!
Куда путь к картинке прописать? Кнопка не наблюдается!!!
В статье всё написано читайте, пожалуйста, внимательнее!
После вставки файла в корень сайта на следующий день при попытке войти в панель управления выскочило: этот сайт может содержать вирус и быть опасным — собирает сведения — !!!!!!!!!!!!
Понятия не имею, я не видел Ваш сайт!
Браузер ругается при попытке войти в панель управления, код к входу я вам дать естественно не могу. У меня следующий вопрос: если вы утверждаете,что «разработчики Google Plus нашли оригинальный подход к решению данной проблемы.» то не могли бы вы предоставить оригинальный адрес файла .js
Нет, я не мог бы предоставить Вам их адрес! Для этого есть Google! Дело не в коде, а в том как и кто его использует! В статье пример работает именно на этом коде, а это говорит о том, что всё исправно!
Не все было доходчиво, но разобралась. Спасибо)
Всегда, пожалуйста!
Не работает кнопка полноэкранного режима на проигрывателе.
Как бы такое же сделать для видео из ВК ??
1. Может, не заметил, но неплохо было бы дописать, что когда много видео на странице — код подключения js можно добавлять только один раз — в самом конце.
2. Немного доработал этот скрипт, чтобы гарантированно после загрузки всей страницы отрабатывал. А именно:
перед единственной строкой в скрипте написал
function process_youtube (){
а после этой единственной строки написал:
}
window.onload=function (){
process_youtube ();
}
А в целом спасибо за статью!
В скрипте указано auktolpay=1 . Правильно ли я понял, воспроизведение этих видео, не будет увеличить количество просмотров на ютуб и популярность данного видео?
После вставки кода, страца перестает быть «защищенной» …бразуер пишет, что страница содержит изображения бла-бла-бла…убрал код и стало нормально
нирование происходит только при нажатии на него. Таким образом, время загрузки страницы сокращается значительно, так как нет необходимости загружать весь плеер заранее. Этот подход позволяет пользователям смотреть видео с комфортом, не теряя времени на ожидание загрузки страницы. К сожалению, данная функциональность пока доступна только для Google Plus, но я надеюсь, что в будущем она будет доступна и для других платформ. Большое спасибо команде Sozdaiblog.ru за полезную информацию! Желаю всем хорошего настроения и успешной работы с вашими блогами!