Как инициировать просмотр видео с youtube не с начала, а с нужного места (при передаче ссылки на ролик или вставке на сайт)

Скрытые возможности встраивания видео из Youtube

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

В этой статье я покажу вам, как это сделать. А также поделюсь некоторыми дополнительными полезностями для вставки этих видео:) Поехали!

Чтобы вставить видео на сайт, необходимо сначала скопировать его код. Код видео берем с сайта YouTube, открыв страницу с нужным видео. На примере видео Академии Лидогенерации:

Комментарии:

  1. Видео на сайте будет в формате iframe — это значит, что на вашем сайте будет врезано встроенное окошко (фрейм), в котором будет воспроизводиться видео напрямую с YouTube (типа окно трансляции такое). Если ваш сайт не поддерживает iframe, то видео не воспроизведется (в этом случае необходимо будет вставлять видео не кодом с YouTube, а используя функции плеера вашего сайта, если они есть)).
  2. Если видео не ваше, то пункта “HTML-код” может и не быть, если владелец видео запретил встраивание этого видео:

Дополнительные настройки встраивания.

Кликните ЕЩЕ под HTML-кодом видео и вы их увидите:

Как они работают:

  1. Размер видео” — тут понятно. Насколько большое окно с видео будет у вас на сайте (можно выбрать или произвольного размера).
  2. Показывать похожие видео …” — если вы не пиарите свой YouTube канал, рекомендую убирать эту галку, чтобы по окончанию видео заботливый YouTube не предлагал посетителю вашего лендинга посмотреть похожие видосы на тему.
  3. Показать панель управления” — отображает нижнюю панель управления видео. Не стоит ее отключать. Не знаю, как вас, а лично меня бесит, когда я не могу убавить звук видео или перемотать его:) оставьте людям возможность рулить процессом.
  4. Показать название видео и…” — убирайте галку, если не хотите, чтобы посетитель лендинга видел сверху видео панельку с названием видео и кнопками лайков. Лично я бы убрал как лишнюю отвлекашку: клик на название открывает новое окно с YouTube (и человек уходит с лендинга), а лайки… да кому они нужны?)))
  5. С режимом повышенной конфиденциальности я лично не разбирался. Справка YouTube говорит, что Если включить этот режим, YouTube будет сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.

Если тыкать эти галки, вы увидите изменения в коде для вставки. Пример:

— оригинальный код без доп.настроек.

— убрал галку “Показывать похожие видео…” (что добавилось в коде выделил красным).

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

Как вставляются доп.коды

Как видите, доп.коды вставляются через знак ? после идентификатора видео. Знак ? ставится только перед первым доп.кодом, остальные вставляются через знак &. Например:

Другие коды, которые могут быть полезны:

  • autoplay=0 — автоматически стартует видео сразу после загрузки страницы.
  • &loop=1 – зацикливает воспроизведение видео ролика на вашей странице.
  • fs=0 — запрещает разворачивать видео на весь экран (убирает соответствующую кнопочку в правом нижнем углу видео).
  • start=20 — запустит ролик с 20-й секунды видео. Полезно, если нужно воспроизвести видео с какого-то конкретного момента.
  • fmt=6 — задает качество видео. fmt=18 делает качество еще лучше, а fmt=22 делает наилучшим. Используется также параметр hd=1 для высокого качества по умолчанию.
  • iv_load_policy=3 — отключает любые комментарии автора видео:) такие как Аннотации, Подсказки и появляющийся в начале видео аватар канала автора. Может быть полезно, если вставляете чужое видео (атата вам) и не хотите уходов на канал автора видео. Этот код НЕ отключает рекламу Google, которая может всплывать на вашем видео (как вы понимаете, такого кода вообще в природе не существует))).
Читать еще:  Внутренняя перелинковка сайта под нч, сч и вч поисковые запросы — делаем его продвижение более легким

Удачных вам экспериментов и CTR до неба!

Статья подготовлена при поддержке и соавторстве знакомого специалиста по YouTube Юрия Бледных в рамках конкурса «Контента много не бывает».

Если статья Вам понравилась, ставьте лайки, пишите комментарии.

Как вставить видео с Ютуба на сайт

11 марта 2018 года. Опубликовано в разделах: Продвижение в YouTube. 8621

Иногда словами не получается объяснить суть темы, поэтому люди начинают жестикулировать, приводить наглядные примеры и т.п. Поэтому и в интернете для раскрытия темы часто необходимо использовать визуальные средства. На помощь приходит всем известный видео-хостинг, на котором размещаются бесплатные видео-ролики.

Дополнительные преимущества вставки видео с Youtube на сайт

  • Получение дохода от показа ролика, если он принадлежит владельцу интернет-сайта.
  • Увеличение популярности веб-ресурса.
  • Пополнение медиа-контентом.
  • Демонстрация портфолио.

Но отсылать посетителя со своего сайта на видео-хостинг неудобно, так как не хочется его терять. Кроме того, каждая лишняя исходящая ссылка “переливает” вес с вашего сайта. А зачем это нужно?

Рассмотрим инструменты, при помощи которых можно разместить видео с Ютуба на сторонний сайт.

Это самый простой способ ретрансляции видео. HTML-код находится на странице видеоролика в Youtube. Нажимаем “Поделиться”.

В поле снизу появляется прямая ссылка на ролик. Но мы выбираем “Встроить” — <> и получаем код видео с Youtube для сайта.

Устанавливаем настройки и копируем его в буфер.

Затем заходим в систему администрирования нашего сайта (предположим, что это MODx). Открываем исходный код той веб-страницы сайта, на которую следует вставить видео с Youtube и размещаем его.

Нажимаем “сохранить” и проверяем.

Фрейм — это такой виртуальный контейнер, который отображает в себе содержимое другой веб-страницы. В его коде можно поправить атрибуты вручную.

  • width и height – его размеры;
  • src – путь;
  • frameborder – рамка есть или нет;
  • allowfullscreen – полноэкранный вид.

2. Вставка html-кода video

Он отображает видеоролики на веб-странице.
Его синтаксис:

  • width и height – его размеры;
  • src – путь, который может задаваться через вложенный ;
  • autoplay — самопроизвольно включается в момент загрузки веб-страницы;
  • controls — ролик отражается вместе с панелью управления;
  • loop — зацикливает повтор;
  • poster — показывает посетителю картинку, если с его отображением возникают проблемы — следует указать путь к изображению-загрушке;
  • preload — видео загружается одновременно со страницей;
  • frameborder – рамка есть или нет;
  • allowfullscreen – полноэкранный вид.

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

Тег можно вставить несколько раз в , ссылаясь на ролики в разных форматах. Пользователь сможет выбрать удобный для просмотра вариант самостоятельно.

3. Видеоплееры на основе JavaScript и Flash.
Только программист сможет внедрить такое приложение к движку. Самым оптимальным и простым из них считается Spruto. На его официальном интернет-проекте можно настроить функционал и внешний вид.

Размещаем URL, делаем настройки и получаем код.

Можно скачать плеер полностью для установки или только код в формате JS или FLASH. В комплект скрипта входит руководство по установке.

4. Спецсредства в движках (CMS).

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

WordPress

В последних версиях можно вставить простую ссылку на Ютуб напрямую. В режиме Html (Text) просто вставляется в нужном месте ссылка на странице и сохраняется. При этом происходит полноценное отображение ролика на сайте. Указатель ?autoplay=0 позволит ролику включаться автоматически при открытии страницы пользователем.

Читать еще:  Рассылка ручной работы или вдохновение для своих

Плагины

Многие CMS работают только с плагинами, Например Joomla доступны а AllVideos или Vidbox. Рассмотрим первый из них.

После скачивания необходимо стандартным способом установить плагин и активировать его. Затем настраиваем: выбираем шаблон, размер плеера, папку для хранения файлов и т.д.
Для каждого видео в Ютубе генерируется уникальный идентификатор, его можно найти в адресной строке в момент просмотра.

Копируем его, затем в нужно месте страницы в Джумла вставляем код типа

На этом все! Вы можете использовать один из методов, чтобы дополнить содержимое вашего сайта.

Как вставить видео на сайт с Youtube — замена Iframe

Как добавить видео на сайт с youtube

После того, как вы скопировали код возвращайтесь на свой сайт и в редакторе поста перейдите на вкладку HTML (эта вкладка должна быть на каждой платформе, не у всех она находится в одном и том же месте), если вы вставите код в обычной вкладке браузер не сможет приспособить его должным образом в следствии чего видео не откроется, будет отображаться только код видео ролика.

Так же при этом следует учитывать ширину полотна вашего поста, у всех они разные. К примеру, когда вы копируете код первым способом, тогда при его вставке вы можете увидеть что ширина (width) плеера 854 пикселя. Пример:

Если добываете код вторым способом параметр ширины будет не 854 пикселя, а 540 пикселей. Соответственно и высота (height) плеера будет разной. Эти параметры вы можете задавать сами, корректируйте их в соответствии с параметрами своего полотна.

Как видите в добавлении видео с youtube на сайт, нет ничего сложного.

Почему поисковики не любят тег Iframe?

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

Думаю вы заметили, что код плеера, как в начале так и в конце содержит тег iframe. Данный тег позволяет отображать часть одного сайта на другом сайте. Возможно слыхали в сети есть такой вид партнерок (реклама) для сайта называются они Iframe. Сайты, которые зарабатывают подобной рекламой ранжируются в поисковых системах намного ниже, нежели их конкуренты. Поисковики прекрасно видят этот тег, но читать они его не могут, к тому же при помощи данного тега можно распространять вирусы.

По-этому, когда вы вставляете код видео плеера на своем сайте, не важно брали вы его с Youtube, с Вконтакте, Vimeo или других медиа сайтов всегда вместо тега Iframe пишите тег embed.

Как вставить в Blogger видео из Youtube, Вк, Фейсбука

Если вам нужно добавить видео в блог на Blogger из медийной сети Youtube, тогда вы можете сделать это тремя простыми способами. Для Вконтакте, Facebook, Twitter и других подобных сетей способ всего один. Во всех случаях нам поможет редактор сообщений или страниц. Помимо этого вы так же можете вставлять видеоролики в боковые панели через раздел Дизайн, но об этом чуть позже.

Вставка видео из Youtube через копирование HTML видеоплеера

После откройте в блоге Сообщение, вверху, с правой стороны перейдите на вкладку HTML и разместите скопированный код в нужном месте.

Таким же способом можно добавлять видео из социальных сетей Facebook, Vkontakte и т.д.. Еще можно поискать иконку или кнопку поделиться и там так же будет возможность скопировать код плеера. По Фейсбуку и Твиттеру смотрите видео в конце статьи.

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

Вставка видео из Youtube через редактор сообщений

Заметили там вкладку Загрузка? Все верно вы так же можете загружать видеоматериалы со своего компьютера, правда много не загрузите, места не хватит, помните у вас в запасе 15гб.

Читать еще:  Whaff rewards — заработок на мобильных приложениях

Добавление видео из Ютуб кнопкой поделиться

Добавление видеоролика в Дизайне

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

Инструкция, как добавить в Blogger видео из Vkontakte и Facebook:

Ускоряем загрузку страниц блога оптимизируя видео

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

Параметр height это высота плеера
Параметр width это ширина плеера
Можете править их в соответствии с размерами ваших страниц.

Смените ссылку на ссылку своего видео.

Библиотеки Jquery (как видите код немного отличается от того который на видео, это не страшно и не спешите его ставить пока не проверите загружаются видео или нет после первых двух шагов).

Переходим к просмотру видео:

Как вставить на сайт адаптивное видео с Youtube, Vkontakte

Привет всем тем, кто движется в направлении идеального сайта — блога и не только на blogspot — blogger но и других платформ. Сегодня у нас очередная важная тема, немного сложновато было описать ее в заголовке, зато здесь мы разойдемся на полную.

Способ подойдет для любой платформы будь то WordPress, Joomla, Blogger и т.д.. Но показывать буду на примере Blogger.

Итак, время движется, с каждым днем появляются новые технологии и наши шаблоны так же не отстают. Ничего не напоминает вам эта фраза? А должна, не так давно мы писали статью о превосходстве отзывчивого, реагирующего шаблона blogger для некоторых милей звучит английский вариант responsive blogger template. Почитайте сперва ее, а потом возвращайтесь к этой. Итак, если вы уже прочитали ее, тогда вы знаете, что с недавних пор гугл стал относится к сайтам с адаптивным дизайном более лояльно, в общем полюбил их больше, нежели те, которые не имеют такого превосходство. Ведь пользователю всегда должно быть комфортно просматривать ваш контент.

Не исключение тому и видео контент сайта — блога. В основном большинство вебмастеров и блогеров используют на своих веб-проектах такие видео-хостинги и социальные сети, как youtube, vimeo, rutube и вконтакте, facebook, twitter и другие. В общем наша задача состоит в том, чтобы пришедший на наш сайт или блог пользователь на своем мобильном телефоне к примеру с шириной дисплея 320 пикселей мог нормально просмотреть наш видеоролик. Потому что, если у него этого не получится сделать на вашем сайте он вмиг с него уйдет. К примеру зайдите на любую страницу нашего сайта где есть видео и сделайте окно вашего браузера то меньше, то больше и вы увидите, как плеер меняет свои размеры соответствуя размеру вашего браузера. Еще одна интересная вещь, сейчас есть много новых шаблонов, которым задают адаптивный дизайн, но как раз о видео плеерах многие веб-дизайнеры забывают.

Настройка адаптивности для видеоплеера с помощью CSS

@media screen and (max-width:768px)>@media screen and (max-width:640px)>@media screen and (max-width:480px)>@media screen and (max-width:320px)>

Сохраняем шаблон и проверяем, как изменяется размер видео плеера при изменении размера окна вашего браузера.

Ссылка на основную публикацию
Adblock
detector