Как вставить видео с ютуба на сайт: пошаговая инструкция с фото

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

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

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

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

1. Вставка html-кода фрейма.

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

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

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

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

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

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

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

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

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

Атрибуты:

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

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

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

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

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

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

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

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

WordPress

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

Плагины

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

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

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

{youtube}QAkJ3w1n9Tg{/youtube}.

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

Как вставить ютуб видео на сайт в 2 Клика

Одним из лучших способов заинтересовать пользователя и улучшить поведенческие факторы – это использовать видеоконтент на страницах вашего сайта…….

Очень часто в дополнение к основному сайту создается канал на YouTube – это не только отличное средство монетизации, но и источник потенциальных клиентов.

Внимание !

В самом конце мы рассмотрим: ↓↓↓

1. Как добавить видео на WordPress сайт
2. На Joomla Сайт 

 

 

Содержание

• Лучшие методы
  • Простой способ добавления ролика
  • Размещаем ролик при помощи тега <video>
  • На WordPress
    • На Joomla

 

Даже если вы не владеете навыками работы с HTML и CSS, то в этом материале вы найдёте очень простые инструкции, как вставить видео на сайт всего в несколько кликов.

Но, в первую очередь, давайте разберёмся, зачем вставлять ролики из YouTube на страницу:↓↓↓

• Улучшает восприятие информации;
• Дополняет содержимое страницы;
• Повышаются поведенческие факторы.

 

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

 

 

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

 

В данном случае мы будем использовать фрейм, который возьмем непосредственно на YouTube.

1) Для этого вы должны перейти на страницу с видео и под ним найти вкладку “Поделиться“, где выбрать раздел “HTML код”

 

Здесь вы получите код, который и нужно вставить в любой раздел сайта между тегами <body>… </body>. 

 

→ Это можно выполнить – через панель управления хостинга или непосредственно на компьютере отредактировать файл html и залить его на сервер !!!

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

Результат будет такой ↓

Общий вид кода выглядит так: ↓↓↓

<iframe width=”430″ height=”275″ src=”https://www.youtube.com/_fdgM” frameborder=”5″ allowfullscreen> </iframe>

P.S – Iframe – это тег, создающий контейнер на сайте, который импортирует содержимое сторонних страниц.

 

В данном случае вы можете самостоятельно настроить некоторые атрибуты: ↓↓↓

• width – определяет длину плеера в пикселях;
• height – устанавливает высоту;
• src – ссылка на импортируемый контент;
• frameboder – для установки границ;
• allowfullscreen – разрешение для полноэкранного режима.

 

 

Размещаем ролик при помощи тега <video>

 

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

 

Давайте рассмотрим общий вид кода для добавления на сайт: ↓↓↓

<video width=”540″ height=”320″ controls=”controls” poster=”foto. png”> <source src=”besty.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> </video>

Обратите внимание, что любые атрибуты вы можете настроить самостоятельно: ↓↓↓

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

 

 

На WordPress

 

Одним из самых простых методов добавления видео используется в WordPress.

1. Для этого вам нужно зайти в админку
2. Нажать “Добавить запись”
3. и непосредственно в форме добавления нажать “Вставить”.

 

Вот и все 

Выглядит эта кнопка в виде значка YouTube – в форму, которая появилась, нужно просто добавить ссылку на ролик.

Также есть специальные плагины для WordPress, при помощи которых можно добавлять видео на сайт.

Среди наиболее популярных можно выделить JW Player, Video.js, Spider Video Player.

 

На Joomla

Что касается системы управления контентом Joomla, то здесь все немного сложнее.

Самый простой метод – это вставить код видео напрямую из Ютуба.

Также есть ещё один практичный способ – AllVideos, Vidbox, AllVideos Reloaded.

Устанавливаются эти утилиты очень быстро и значительно упростят процесс, как вставить видео с Ютуба на Joomla

 

Я очень советую ↓↓↓

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

Как встроить видео с YouTube на веб-сайт

Энни Пачелла 17.03.2022 09:00 Веб-дизайн 0 Комментариев

Знаете ли вы, что более 90% информации, которую мы потребляем, является визуальной? YouTube — это информационная площадка, которая позволяет получить доступ к миллионам видео прямо у вас под рукой. Видео играют большую роль в обмене информацией и могут обеспечить максимальную рентабельность инвестиций. Давайте начнем!

Встроенное видео позволяет заимствовать видео с другой платформы. Большинство видеороликов встроены с Youtube, что означает, что посетители могут смотреть видео YouTube на вашем веб-сайте, не покидая текущую страницу.

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

Если вы хотите встроить видео YouTube, выполните следующие действия от службы поддержки Google:

1. Встроить видео или плейлист
2. На компьютере перейдите к видео YouTube или плейлисту, который вы хотите встроить.
3. Нажмите ПОДЕЛИТЬСЯ Поделиться.
4. В списке параметров общего доступа щелкните Встроить.
5. Из появившегося окна скопируйте код HTML.
6. Вставьте код в HTML-код вашего веб-сайта.
7. Для сетевых администраторов: вам необходимо добавить youtube.com в белый список брандмауэра.

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

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

Учитывая, что люди хотят получать информацию как можно быстрее, это идеальный вариант!

Встроенные видео позволяют улучшить поиск вашего видео в Google.

 

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

Если вы хотите добавить время окончания видео, вам нужно сделать всего несколько дополнительных шагов.

1. Выполните исходные шаги, описанные выше, и вставьте свой код на свой веб-сайт.
2. Вернитесь к выбранному видео на Youtube. Выберите время, когда вы хотите закончить видео.
3. Например, если вы хотите закончить видео на 3 мин 13 сек, перейдите туда и щелкните видео правой кнопкой мыши.
4. Появится всплывающее окно, позволяющее выбрать «Копировать URL-адрес видео в текущее время».
5. Откройте блокнот и временно вставьте ссылку. Эта ссылка даст вам выбранное время окончания в секундах.
6. Теперь вернитесь на свой сайт, введите время окончания из блокнота в код для встраивания. Это будет выглядеть так: («начало=время;конец=время»)

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

Использование видео для визуального руководства вашей аудиторией — вот что такое 2022 год.

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

Дайте нам знать, что вы думаете в комментариях ниже!

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

Краткие сведения

Как добавить время начала встроенного видео?

Как только вы найдете видео YouTube, которое хотите встроить, нажмите «Поделиться», вставьте видео, прокрутите вниз до элементов управления и нажмите «Настроить время начала». Затем код будет обновлен, чтобы отразить это новое время начала.

Как добавить время окончания к встроенному видео?

Найдите время, когда вы хотите остановить видео, щелкните правой кнопкой мыши и выберите «Копировать URL-адрес видео в текущее время».

Затем вставьте это в виде обычного текста в заметки или слово, а затем добавьте его в свой код на своем веб-сайте. Должно выглядеть так («начало=время;конец=время»).

 

Синий Лучник

Вернуться к списку

Как встроить видео YouTube на адаптивный веб-сайт

Чтобы встроить видео YouTube на адаптивный веб-сайт, разработанный INSYTE, выполните описанные ниже действия:

1. Сначала найдите видео на YouTube.com
   
2. Под видео щелкните ссылку Поделиться (она выделена желтым цветом на снимке экрана ниже)
   
3. Найдите следующие доступные варианты: « Поделиться », « Встроить » и « Электронная почта »
   
4. Выберите вариант с надписью:  Встроить
   
5. Отобразится текстовое поле с кодом внедрения , которое можно скопировать в буфер обмена.
   
6. ПЕРЕД копированием кода используйте доступные для выбора параметры под видео, чтобы решить, хотите ли вы, чтобы предлагаемые видео отображались после завершения вашего видео. (О Мы рекомендуем отключить эту функцию, поскольку вы не можете контролировать видео, предлагаемые YouTube, а иногда они неуместны и не подходят для вашего сайта.)
   1. Чтобы отключить рекомендуемые видео, снимите флажок рядом с пунктом «Показывать рекомендуемые видео после окончания видео», расположенным под предварительным просмотром видео и под параметрами «Размер видео». ( Когда вы нажмете на это, вы должны увидеть небольшие изменения в коде