Sozdaiblog.ru
Назад

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

Опубликовано: 02.04.2013
Время на чтение: 5 мин
55
2292

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

Хорошего настроения всем читателям – 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 необходимого видеоролика. Чтобы его узнать, достаточно включить просмотр в ютубе и заглянуть в адресную строку браузера.

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

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

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

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

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

Поделиться
Похожие записи
Комментарии:
  • Алексей
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Ирина
    Опубликовано: 02.05.2013 Ответить на сообщение

    Ай молодца! Денис! Пытливый ум! Мне это очень пригодится!
    Шикарный банер сделал у себя и красиво переустроил сайт
    А вот «Курс за доллар» я так и не могу посмотреть — не кликабельно или нет еще курсов?

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

      • Ирина
        Опубликовано: 02.05.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Людмила
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Михаил
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Надежда
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Алексей Виноградов
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Николай
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Ирина
    Опубликовано: 02.05.2013 Ответить на сообщение

    Попыталась сделать... не очень понятно...
    А именно что надо (адрес чего... какой картинки?) вставить тут «http://Путь к файлу youtube.js» И поконкретнее, куда определить изображение кнопки воспроизведения. Приведите реальный пример, чтобы по аналогии можно было бы сделать.

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

      Ирин, в http: //Путь к файлу youtube.js прописывается путь к файлу youtube.js, который находится в скаченном архиве и который Вы закидываете на свой сервер в любое удобное место корневой папки. Изображение определяйте куда угодно, хоть вместе с ранее загруженным файлом закидывайте, только в скрипте (файле) пропишите путь к изображению.

      • Ирина
        Опубликовано: 02.05.2013 Ответить на сообщение

        У меня получился такой путь http:// babairisha.ru/public_html/youtube/youtube.js Это правильно? Изображения нет почему-то никакого.

        • Денис Черников
          Опубликовано: 02.05.2013 Ответить на сообщение

          Ирина, Вы сейчас мне показали путь к файлу «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».

  • Николай
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Daria
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Vadar
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Сергей
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.05.2013 Ответить на сообщение

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

      • Сергей
        Опубликовано: 02.05.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 02.05.2013 Ответить на сообщение

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

  • Сергей
    Опубликовано: 02.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 03.05.2013 Ответить на сообщение

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

  • Геннадий
    Опубликовано: 03.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 03.05.2013 Ответить на сообщение

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

  • Николай
    Опубликовано: 03.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 04.05.2013 Ответить на сообщение

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

  • Виктор
    Опубликовано: 23.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.05.2013 Ответить на сообщение

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

  • Олег Митрофанов
    Опубликовано: 23.07.2013 Ответить на сообщение

    Это я один не вижу ссылку на скачивание скрипта?
    Вы посоветовали Daria нажать на синюю кнопку, а мне куда нажать?
    После какого она абзаца стоит? Может, слетела после редактирования?

    • Денис Черников
      Опубликовано: 23.07.2013 Ответить на сообщение

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

  • Юлия Пономарева
    Опубликовано: 04.09.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 04.09.2013 Ответить на сообщение

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

  • Илья
    Опубликовано: 09.04.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.04.2014 Ответить на сообщение

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

  • Илья
    Опубликовано: 10.04.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.04.2014 Ответить на сообщение

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

  • Илья
    Опубликовано: 11.04.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.04.2014 Ответить на сообщение

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

  • Екатерина
    Опубликовано: 30.08.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 30.08.2014 Ответить на сообщение

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

  • Татьяна
    Опубликовано: 15.08.2016 Ответить на сообщение

    Не работает кнопка полноэкранного режима на проигрывателе.

  • Артем
    Опубликовано: 08.09.2016 Ответить на сообщение

    Как бы такое же сделать для видео из ВК ??

  • Денис
    Опубликовано: 24.11.2016 Ответить на сообщение

    1. Может, не заметил, но неплохо было бы дописать, что когда много видео на странице — код подключения js можно добавлять только один раз — в самом конце.
    2. Немного доработал этот скрипт, чтобы гарантированно после загрузки всей страницы отрабатывал. А именно:
    перед единственной строкой в скрипте написал
    function process_youtube (){
    а после этой единственной строки написал:
    }
    window.onload=function (){
    process_youtube ();
    }
    А в целом спасибо за статью!

  • Вячеслав
    Опубликовано: 22.12.2016 Ответить на сообщение

    В скрипте указано auktolpay=1 . Правильно ли я понял, воспроизведение этих видео, не будет увеличить количество просмотров на ютуб и популярность данного видео?

  • Вячеслав
    Опубликовано: 22.12.2016 Ответить на сообщение

    После вставки кода, страца перестает быть «защищенной» ...бразуер пишет, что страница содержит изображения бла-бла-бла...убрал код и стало нормально

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.