ГлавнаяCSS, JQuery, JavaScript › Самый эффективный метод встраивания видео You Tube!


Самый эффективный метод встраивания видео You Tube!


как вставлять видео с You Tube

Хорошего настроения всем читателям – Sozdaiblog.ru!

Сегодня Вы узнаете о том, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.

Наверняка каждый из Вас уже давно догадался, что при встраивании видеоролика с You Tube в любую страницу Вашего Веб-ресурса, существенно увеличивает время её загрузки.

Если Вы раньше этого не знали, то сейчас самое время прозреть.

Почему так происходит? Сейчас попробую пояснить.

При внедрении любого видео YouTube на Веб-сайты с использованием стандартных тегов IFRAME, сами того не ведая, Вы создаёте кучу лишних HTTP запросов (CSS, JavaSript и просмотр архивов), которые нацелены на построение и отображение стандартного ютубовского видеоплеера.

Самое обидное то, что независимо от того будет ли посетитель смотреть видео или нет, дополнительные запросы будут постоянно увеличивать время загрузки запрашиваемой страницы.

Недавно я заметил, что разработчики Google Plus нашли оригинальный подход к решению данной проблемы.

Вместо того чтобы загружать и отображать целиком весь плеер со всей его навигацией, Google показывает только эскиз видеоролика, а сверху накладывает значок воспроизведения. Вот взгляните пример их инновации:



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

Те, кто подписан на обновления этого блога и постоянно получает мои новые статьи, знают, что я всё время ищу и нахожу новые способы и возможности увеличения скорости загрузки сайта. Об этом свидетельствуют следующие посты:



Вот и в этот раз я снова принялся за старое, решив разгадать тайну Google Plus, чтобы узнать, как вставлять видео с You Tube на свой сайт без увеличения времени загрузки страницы.

Как вставлять видео с You Tube эффективно.

Оказывается, что есть специальный скрипт, который необходимо скачать и закинуть в корневую папку своего Веб-ресурса.

Теперь при встраивании видеороликов в посты блога нужно воспользоваться не привычным кодом IFRAME, а представленным ниже:

<div class="youtube" id="JZioV5d3osg" style="width:400px; height:200px;"></div>
<script src="http://Путь к файлу youtube.js" type="text/javascript"></script>



В принципе, здесь нет ничего сложного. Единственное на что стоит обратить внимание – это id. Вам потребуется прописать id необходимого видеоролика. Чтобы его узнать, достаточно включить просмотр в ютубе и заглянуть в адресную строку браузера.


Как вставлять видео You Tube


Затем скопировать и вставить в вышеупомянутый код. Ещё в этом коде обязательно укажите путь к ранее загруженному файлу.

Кстати, друзья в архиве вместе со скриптом находится изображение кнопки воспроизведения. Её, как и скрипт, необходимо закинуть в удобное для Вас место на Вашем сервере, а в скрипте прописать к ней путь.

Место для вставки адреса картинки я пометил так – «дорога к изображению». Так Вам будет намного легче его найти. Если что, то Вам не обязательно использовать именно эту картинку. Можете вставить что-то своё. Всё ограничивается лишь Вашей фантазией.

На сегодня это всё. Удачи и до следующих постов...

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




50 комментариевА что думаете Вы?

  1. Алексей

    По-моемому, что-то интересное. Надо дополнительно обмозговать и, наверное, применить.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, применяйте!

    [Ответить]

  2. Ирина

    Ай молодца! Денис! Пытливый ум! Мне это очень пригодится!

    Шикарный банер сделал у себя и красиво переустроил сайт

    А вот «Курс за доллар» я так и не могу посмотреть — не кликабельно или нет еще курсов?

    [Ответить]

    Денис Черников ответил:

    Спасибо, Ирина!А что за проблемы с курсом? Его нужно купить сначала! Он поэтому и называется «Курс за доллар»! Инструкция по покупке в начале раздела.

    [Ответить]

    Ирина ответил:

    Это я понимаю, что надо купить...видимо для меня не понятна была навигация. Я не ожидала, что картинка под надписью и есть тот самый курс за доллар

    [Ответить]

    Денис Черников ответил:

    А вон оно что! Я не стал делать кликабельной надпись. Картинка же больше и в меню раздел есть.

    [Ответить]

  3. Людмила

    Денис,я так поняла, что файл YouTube (то есть видео ролик) сначала надо скачать и закинуть себе на хостинг, А потом прописывать к нему путь?

    [Ответить]

    Денис Черников ответил:

    Нет, Людмила Вы не правильно поняли! Нужно скрипт закидывать, а не видеоролик! А в кода прописать id клипа.

    [Ответить]

  4. Михаил

    Заинтересовало, это действительно нужно попробовать, спасибо за материал, Денис, вечером обязательно попробую.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Михаил! Обязательно попробуйте, там всё просто!

    [Ответить]

  5. Надежда

    Действительно, статья необычайно полезная! Обязательно воспользуюсь данным способом вставки видео с ютуб на блог. Спасибо за ваш труд!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Надежда! Способ надёжный, сами разработчики Гугла его используют.

    [Ответить]

  6. Алексей Виноградов

    Очень интересно! А разве этот скрипт не будет делать много запросов чтобы получить скрин с видео-ролика?

    [Ответить]

    Денис Черников ответил:

    Да он только картинки запрашивает, а не целую визуализацию с навигацией плеера!

    [Ответить]

  7. Николай

    Очень полезная информация. Спасибо. Нужна ваша помощь: я не могу прописать путь к файлу на сервере. Этот файл закидывать в архиве или разархивировать? Приведите, пожалуйста, пример такого пути.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Конечно, архив нужно распаковать, а файл закинуть на сервер! А путь — это просто адресная ссылка. Обычно через ftp клиента можно легко посмотреть.

    [Ответить]

  8. Ирина

    Попыталась сделать... не очень понятно...

    А именно что надо (адрес чего... какой картинки?) вставить тут «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».

    [Ответить]

  9. Николай

    Ура! Все получилось! Огромное спасибо Вам, Денис.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Николай! Рад за Вас! Заходите.

    [Ответить]

  10. Daria

    Здравствуйте, Денис! А где же скрипт для скачивания — его не видно что-то. И еще — в коде для вставки заданы ширина и высота. Их менять можно? а можно указывать только ширину чтоб не нарушались пропорции или надо все высчитывать?

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Daria! А Вы попробуйте на синюю кнопочку нажать!!! Размеры можно менять по-своему желанию и усмотрению.

    [Ответить]

  11. Vadar

    Привет Денис! Выходит, нужно скопировать ваш этот скрипт к себе и сохранит?

    [Ответить]

    Денис Черников ответил:

    Привет, Vadar! Срипт нужно скачать и закинуть на хостинг, а вот код необходимо скопировать и вставить в статью изменив описанные в посте места!

    [Ответить]

  12. Сергей

    Поставил себе на блог, прикольно. У меня адаптивный шаблон, пришлось еще в css лезть, чтобы все это прорезинить. :)

    Жаль, что к видео, добавленному на блог ранее, нельзя комплексно применить этот скрипт, а редактировать каждый пост нет времени и желания. Ну и ладно, буду к новым применять. Спасибо Денис.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! Конечно, комплексно заменить не получится все, но зато теперь Вы уже во всеоружии.

    [Ответить]

    Сергей ответил:

    Еще хочу добавить на счет скорости загрузки страницы, понимаю,что в теории страница должна грузиться быстрее, но на практике к сожалению разницы я не заметил. Думаю если на странице несколько видео, тогда результат будет ощутим. А идея хорошая, по крайней мере теперь у видео вид немного другой, не как у большинства блогеров.

    [Ответить]

    Денис Черников ответил:

    Помните, Сергей поговорку — Курочка по зёрнышку? Там убрали лишнее, потом в другом месте, а в совокупности время загрузки уменьшилось. Вы это не заметите, а поисковые роботы видят всё.

    [Ответить]

  13. Сергей

    Да я и не спорю, конечно изменения в скорости есть, не зря же этот скрипт придумывали. :) Как я понял грузится только картинка, а все причиндалы плеера уже после клика,по любому должно быть быстрее.

    [Ответить]

    Денис Черников ответил:

    Вы всё правильно поняли, Сергей! Применяйте!

    [Ответить]

  14. Геннадий

    Спасибо, Денис! Давно хочу все, что можно перевести на код, чтобы увеличить скорость.Твоя статья, как специально кстати. Даже удивлен, что и в видео можно использовать технологии повышения скорости через код.

    Пожелание, не все разбираются в кодах хорошо.Давай всегда пример для подражания.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Геннадий!

    Да, на код можно перевести практически всё!

    Я сам некоторое время назад вообще понятия не имел, как создаются сайты и про вёрстку ничего не слышал. Я ни где этому не обучался и всё постигал сам, каждый раз набиваю новые шишки. Если я могу кому-то послужить примером, то я только за! Кстати, спасибо за пожелания и с праздником Вас!

    [Ответить]

  15. Николай

    Денис, у меня вопрос по теме. Как устранить такой недостаток: дело в том,что после очередного редактирования поста и его обновления видеоролик исчезает и приходится его опять ставить.

    [Ответить]

    Денис Черников ответил:

    Николай, всё дело в тупом визуальном редакторе, который просто уже задрал. При переключении с HTML все коды постоянно слетают, поэтому так и происходит. Если разбираетесь в коде, то лучше его отключить, если нет, то основной материал редактируйте визуально, а в конце проставляйте все коды в HTML и сохраняйтесь. После этого в визуальный редактор не заходите, а если зайдёте, то там не сохраняйтесь!

    [Ответить]

  16. Виктор

    Хорошая штука. Обязательно воспользуюсь!

    [Ответить]

    Денис Черников ответил:

    Пользуйтесь, Вам понравится!

    [Ответить]

  17. Олег Митрофанов

    Это я один не вижу ссылку на скачивание скрипта?

    Вы посоветовали Daria нажать на синюю кнопку, а мне куда нажать? :)

    После какого она абзаца стоит? Может, слетела после редактирования?

    [Ответить]

    Денис Черников ответил:

    Большая синяя кнопка!

    [Ответить]

  18. Юлия Пономарева

    Денис, я опять с благодарностью. У меня всё получилось очень и очень просто. Да ещё и лишний плагин теперь можно отключить!

    Большущее спасибо!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Юлия! Стараюсь рассказывать всё просто, чтобы у любого получилось!

    [Ответить]

  19. Илья

    Куда путь к картинке прописать? Кнопка не наблюдается!!!

    [Ответить]

    Денис Черников ответил:

    В статье всё написано читайте, пожалуйста, внимательнее!

    [Ответить]

  20. Илья

    После вставки файла в корень сайта на следующий день при попытке войти в панель управления выскочило: этот сайт может содержать вирус и быть опасным — собирает сведения — !!!!!!!!!!!!

    [Ответить]

    Денис Черников ответил:

    Понятия не имею, я не видел Ваш сайт!

    [Ответить]

  21. Илья

    Браузер ругается при попытке войти в панель управления, код к входу я вам дать естественно не могу. У меня следующий вопрос: если вы утверждаете,что «разработчики Google Plus нашли оригинальный подход к решению данной проблемы.» то не могли бы вы предоставить оригинальный адрес файла .js

    [Ответить]

    Денис Черников ответил:

    Нет, я не мог бы предоставить Вам их адрес! Для этого есть Google! Дело не в коде, а в том как и кто его использует! В статье пример работает именно на этом коде, а это говорит о том, что всё исправно!

    [Ответить]

  22. Екатерина

    Не все было доходчиво, но разобралась. Спасибо)

    [Ответить]

    Денис Черников ответил:

    Всегда, пожалуйста!

    [Ответить]

Оставить комментарий!

Вверх