Как получить HTML-код для вставки на сайт видео с YouTube. Html как вставить видео на сайт


Как получить HTML-код для вставки на сайт видео с YouTube

Видео с YouTube вовсе не обязательно просматривать только на сайте www.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.

Как узнать адрес YouTube видео, расположенного на сайте

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

Как узнать адрес YouTube видео, расположенного на сайте

Ссылки «Поделиться» ролика с YouTube

Клик по хитровывернутой стрелки приведёт к тому, что в окне видео-плеера YouTube поверх самого видео появится слой «Поделиться» с прямой ссылкой на видео. Но нам нужна не ссылка на видео, нам нужен HTML-код для вставки этого видео на сайт. Поэтому двигаемся дальше и кликаем по кнопке ...:

Ссылки «Поделиться» ролика с YouTube

HTML-код для вставки на сайт видео с YouTube

Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:

  1. Находим ссылку «Поделиться» (уже со знакомой нам хитровывернутой стрелкой), кликаем по ней!
  2. В выпавшем меню, находим ссылку «HTML-код».

HTML-код для вставки на сайт видео с YouTube

В общем-то всё!

Во вкладке «HTML-код», найденной выше будет то, что мы искали:

<iframe src="https://www.youtube.com/embed/CZKXWQ02e-4" frameborder="0" allowfullscreen></iframe>

Этот код можно скопировать и попытаться вставить к себе на сайт. С этим могут быть проблемы, так как тег <iframe> может быть запрещён, но это тема для другой статьи.

Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.

P.S. обновлённая статья «Ссылка на видео и HTML-код для вставки видео на сайт c YouTube»

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

mb4.ru

Как вставить видео на сайт в HTML и популярных CMS?

Разместить на своём сайте ролик с популярного видеохостинга не трудно. Скажем, если ваш ресурс работает на WordPress, то для вставки видео с YouTube достаточно просто добавить в запись ссылку на него, и ролик встроится автоматически (при правке записи убедитесь, что редактор работает в визуальном режиме, и вставьте ссылку в текст). Но если вы хотите настроить некоторые параметры (например, задать ширину и высоту окна с роликом), или контент находится не на видеохостинге, а на самом сайте, или блог работает не на WordPress, тогда процедура становится немного другой.

Существует несколько способов добавления видеоролика на сайт:

  • фреймы;
  • скрипты;
  • тег video, появившийся в HTML5.

Их и рассмотрим.

Фреймы: вставка видео с YouTube

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

Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

  1. Откройте видео, которое хотите разместить.
  2. Под ним нажмите кнопку и щёлкните на вкладке .Вставка видео с youtube
  3. Скопируйте код из появившейся строки.
  4. Вставьте на страницу своего сайта. Куда вы добавите фрейм, там и появится видео.

Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

Настройки видео

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

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

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

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

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

Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

<iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Что это означает?

  • <iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
  • width — значение атрибута определяет ширину фрейма.
  • height — задаёт высоту.
  • src — содержит ссылку на видеоролик.
  • frameborder — устанавливает ширину рамок фрейма.
  • allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

<iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Мы получим:

<iframe src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

Скрипты

Для вставки видео на страницы можно использовать и специальные плеера — написанные, в основном, на JavaScript с использованием библиотеки JQuery, приложения. К минусам их эксплуатации относится относительная сложность установки, к плюсам — обилие настроек.

Проигрывателей видео для сайта разработано довольно много. В качестве примера популярных скриптов можно назвать FlowPlayer и JW Player.

В общем случае процесс подготовки веб-проигрывателей к работе выглядит так.

  1. Вы выбираете и скачиваете плеер.
  2. Загружаете библиотеки, которые необходимы ему для работы.
  3. Подключаете скрипты.
  4. Прописываете код вывода проигрывателя на экран.

К сожалению, подробное описание работы с Web-плеерами — тема отдельной статьи, поэтому дальше задерживаться на нём не буду, а опишу лучше третий метод.

HTML5

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

Самый простой код вставки видео будет таким:

<video src="film.webm"></video>

Где film.webm — ссылка на воспроизводимый ролик.

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

<video controls> <source src="videos/play.mp4" type="video/mp4"> <source src="videos/play.ogv" type="video/ogg"> <source src="videos/play.webm" type="video/webm"> </video>
  • video — контейнер, отображающий ролик.
  • source — тег, содержащий информацию о видео. Обратите внимание, что в примере код содержит ссылки аж на три ролика разных форматов. Дело в том, что пока разные браузеры поддерживают не все кодеки, и возможные проблемы с воспроизведением решаются кодированием одного и того же ролика с помощью разных кодеков и одновременным добавлением файлов в тег.
  • controls — включает панель воспроизведения.
  • src — задаёт путь к проигрываемому ролику.
  • type — указывает тип контента, на который ссылается атрибут src.
  • Есть и дополнительные, не попавшие в код, атрибуты, позволяющие настроить проигрывание.
  • width — определяет ширину области отображения.
  • height — задаёт высоту.
  • autoplay — воспроизводит ролик автоматически после загрузки страницы.
  • loop — зацикливает воспроизведение.
  • preload — загружает видео вместе со страницей.
  • poster — содержит адрес изображения, которое будет показываться вместо ролика, если он вдруг по каким-либо причинам не воспроизведётся.

Заключение

Это основные, используемые в настоящее время (2017 год), способы вставки видео. Фреймы с YouTube — самое простое и удобное, что можно предложить, но не всем понравится, что их видео хранятся на стороннем ресурсе, где могут быть заблокированы или удалены. Использование HTML5 и вставка тега video — вариант чуть сложнее, но зато он универсален и позволяет проигрывать видео, хранящиеся где угодно. Использование скриптов, на мой взгляд, самый неуклюжий способ, но зато они позволяют веб-мастеру тонко настроить окно ролика, зачастую не прибегая для этого к изменению HTML и CSS.

www.seostop.ru

Как добавить видео на свой сайт с использованием тега video в html5

На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на youtube, скопировали код для размещения на своем сайте, все работает, все красиво, но вот во время просмотра всплывает реклама, которая очень не нужна в данном случае. Начали искать другие видео-ресурсы, на которых можно разместить свое видео, оказалось, что у всех показывается реклама во время просмотра видео. Тогда приняли решение разместить видео на своем хостинге и вывести его на странице с помощью тега <video>.

Самый простой способ вывести видео на странице это прописать такой код:

<video src="video/demidov-park-promo.mp4" poster="images/screenshot.jpg" controls="controls" preload="auto"></video>

Где указан

  • id — идентификатор для тега, размеры видео (ширина, высота),
  • src — путь к видеофайлу, poster — картинка, которая будет заставкой для окна видео,
  • controls — подключение встроенной в браузер панели управления для видео (у каждого браузера свои элементы управления),
  • preload — возможность начать загрузку видео сразу при при открытии страницы, что позволит запустить видео без задержек на загрузку, которая при стандартных настройках начнется только после нажатия кнопки Play.

Из всех этих параметров обязательным является только src — путь к файлу видео, остальные по желанию. Более подробно про тег <video> можно прочитать здесь.

Но во время размещения видео столкнулись с некоторыми проблемами, потому как разные браузеры поддерживают разные кодеки и поэтому не все воспроизводят видео в формате .mp4. Пришлось искать программы для конвертации видео в нужные форматы, помогли эти программы:

DVDVideoSoft Free Studio — программа для конвертации видео в формат .ogvFreeWebMVideoConverter — программа для конвертации видео в формат .webm

И на сайте разместили по итогу такой код для вывода видео:

<video poster="images/screenshot.jpg" controls="controls" preload="auto"> <source src="video/demidov-park-promo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video/demidov-park-promo.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="video/demidov-park-promo.ogv" type='video/ogg; codecs="theora, vorbis"' /> <object type="application/x-shockwave-flash" data="video/uppod.swf"> <param name="bgcolor" value="#ffffff" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="movie" value="video/uppod.swf" /> <param name="flashvars" value="comment=video_flv&amp;m=video&amp;file=demidov-park-promo.mp4" /> </object> </video>

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

Могут возникнуть проблемы с MIM-типами. MIM-типы — часть значения атрибута type у тега source. Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.

Если вы применяете веб-сервер Apache или его производные, то можете использовать директиву AddType в httpd.conf или файле htaccess расположенный в той директории, где вы храните ваши видеофайлы. Если вы используете другой веб-сервер, обратитесь к документации вашего сервера о том, как установить HTTP-заголовок Content-Type для определенных типов файлов.

Добавьте в свой файл htaccess в корне сайта такие правила:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm

Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.

Вот так выглядит прогрыватель видео в Firefox:video-html5

denis-creative.com

Как вставить видео c Youtube на сайт (HTML, CMS, адаптивность)

Вставка видео с YoutubeВ недавней заметке о том как правильно написать статью для блога я упоминал, что желательно добавлять в контент графические материалы и видеоролики. Они улучшают читаемость текста + дополняют его легкой по восприятию информацией. В обучающих публикациях это, например, может быть визуальная демонстрация того или иного вопроса, описанного в заметке. Часто подобные материалы встречаются в развлекательных веб-проектах. Да и вообще видеоконтент в наше время становится весьма популярным.

Именно поэтому сегодня я хочу рассмотреть несколько нюансов по вставке видео на сайт с Youtube и похожих сервисов. Часть инфы в начале пригодится новичкам, а в конце текста найдете один прием для верстки. Разделы статьи:

Вставка видео с Youtube

Начнем с самого глобального и универсального метода. Практически в каждом видеохостинге рядом с роликом должна быть форма, позволяющая поделиться им с другими пользователями. В ютубе она выглядит следующим образом:

Как вставить видео с Youtube

На этой странице вы можете:

  1. Определиться с методом распространения ролика: социальные сети, вставить видео на сайт в HTML формате (что нам и нужно) либо отправить его по почте.
  2. При клике на второй пункт увидите специальный HTML код для вставки видео на сайте.
  3. На третьем шаге выбираете размер — есть парочка форматов по умолчанию (640х360, 560х315 и т.п.), но также разрешается задавать и свои значения.
  4. По желанию включаете доп.параметры: показ названия, панели управления и похожих видео.

То есть все, что вам нужно сделать, это скопировать код соответствующего ролика и добавить его в требуемое место.

<iframe src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe>

Если у вас в проекте имеется определенная админка, то используйте ее встроенный текстовый редактор. В противном случае придется редактировать непосредственно HTML страницу (через Notepad++ или Sublime Text и т.п). Реализацию первого варианта можете посмотреть ниже на примере с Вордпресс.

Пару слов о теге Iframe, который применяется чтобы вставить видео на сайт в HTML с Ютуба. Здесь есть следующие параметры:

  • width — ширина блока;
  • height — высота;
  • src — ссылка на Youtube видео;
  • frameborder — отображение рамки/границы у фрейма;
  • allowfullscreen — поддержка полноэкранного режима.

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

Вставка видео в WordPress и не только

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

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

Чтобы вставить видео на сайт WordPress:

  1. Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
  2. Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
  3. В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

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

Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

  1. Зайти в текстовый редактор в режим HTML.
  2. Скопировать код из ютуба в область контента.
  3. Сохранить страницу/запись в том же HTML режиме.

Dставка видео в WordPress в HTML режиме

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

Адаптивное видео c Youtube

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

Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:

<div> <iframe src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe> </div>

<div> <iframe src="https://www.youtube.com/embed/KiS8rZBeIO0" frameborder="0" allowfullscreen></iframe> </div>

Затем в стилях прописываете:

.adaptive-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .adaptive-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.adaptive-wrap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .adaptive-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Тут есть 2 нюанса:

  • Если плеер добавляется через object и embed, то для них также задаете аналогичные стили как с iframe.
  • В первом селекторе стилей параметр padding-bottom: 56.25%; соответствует пропорциям ролика 16:9, если нужен формат 4:3 — используйте значение 75%.

Код проверял, все работает. Данных трех примеров как вставить видео с Youtube на сайт вам должно хватить с головой. Будут какие-то вопросы — пишите в комментариях. Возможно, позже дополню пост, если найду новую инфу.

tods-blog.com.ua

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

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

Здравствуйте!  В этом уроке разберем как вставить видео на сайт.  Существуют 2 способа вставки видео на сайт. Это используя сервис видеохостинга как например ютуб, рутуб и им подобные, а второй используя тег video, который появился в HTML5.Самый простой  это конечно же первый способ.  Если вы хотите  загрузить видео  с видеосервиса  то вам придется  выполнить 3 пункта:1.  Сперва надо зарегистрироваться на видеосервисе (Например: Youtube)2. После регистрации вы сможете  загрузить видео3. Остается получить код видео и собственно вставить его на свой сайт

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

 

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

Сперва у вас должен быть  видео-ролик, который  вы хотите добавить. Предположим, что  таковой у вас есть и сохранен на вашем компе.Теперь идите  на сайт www.youtube.com.  Далее  нажимайте  на кнопку  «Войти»,  в верхнем правом углу.  После чего  входите с помощью учетной записи Google.  Если у вас нет аккаунта на Гугл, то вам следует зарегистрироваться.как загрузить видео на ютубПосле того, как войдете на youtube под своим аккаунтом, жмите на кнопку «Добавить видео». Откроется страничка с выбором файла для загрузки, где  вы можете выбрать нужный файл с видео, хранящемся у вас на компьютере.

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

Когда Вы перейдете  на страницу с видео, то увидите ваше только что загруженное видео.

3. Теперь все что вам остается та это получить код для вставки видео на сайт.  Для этого  следует клацнуть на  «Поделиться», а потом на вкладке «HTML-код».

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

 

Вот пример кода:<Iframe width = «560» height = «315» src = «// www.youtube.com/embed/FkX88N4pCow?rel=0» frameborder = «0» allowfullscreen> </ iframe>

Вставка видео  на сайт  с помощью тега video.

Тег video, который появился в HTML5,   позволяет добавлять видео на веб-страницу с помощью плеера правда поддерживает такие форматы видео: ogg, mpeg4, webm.Вот его синтаксис:

<video>  <source src="URL"> </video>

Имеет следующие атрибуты:autoplay —  видео будет воспроизводиться сразу после загрузки веб-страницы.controls —  позволяет добавить элементы управления видео в плеерheight — задает высоту видео-плеераloop —  зацикливает воспроизведение видео.src —  задает путь к файлу с видеороликом.width — позволяет задать ширину видео

Пример кода тега video

<!DOCTYPE html><html>  <head>   <metacharset="utf-8">   <title>video</title>  </head>  <body>   <videoheight="400"controls="controls"poster="video/duel.jpg">    <sourcesrc="video/duel.ogv"type='video/ogg; codecs="theora, vorbis"'>    <sourcesrc="video/duel.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>    <sourcesrc="video/duel.webm"type='video/webm; codecs="vp8, vorbis"'>    Тег video не поддерживается вашим браузером.     <a href="video/duel.mp4">Скачайте видео</a>.   </video>  </body> </html>

Вставка видео  на веб-страницу при помощи embed

Элемент embed  позволяет загружать на веб-страницу различные объекты ( видеофайлов, флэш-ролики, аудио-файлы), которые браузер не понимает. Чем  сей метод отличается от предыдущих?

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

Вот пример вставки флеш-ролика с помощью тега embed.

<!DOCTYPE html> <html>   <head>     <metacharset="utf-8">     <title>Пример кода с тегом EMBED</title>   </head>   <body>     <embed src="images/examle.swf"width="400"height="300"            type="application/x-shockwave-flash"            pluginspage="http://www.macromedia.com/go/getflashplayer">     </body> </html>

Атрибуты тега embedalign — задает обтекание текстом объектаheight — позволяет указать высоту объектаhidden —  задает скрыт объект на странице или нет.hspace — горизонтальное поле для окружающего контентаpluginspage — задает адрес страницы  в Интернете, откуда можно скачать и установить плагинsrc — путь к файлуtype — задает MIME-тип  объектаvspace — указывает вертикальное поле для объектаwidth — ширина встроенного объекта

Смотрите видеоурок как добавить видео на сайт

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Твитнуть

Плюсануть

Поделиться

Также читайте

webdiz.com.ua

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

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

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

Внимание !

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

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

 

 

Лучшие методы

 

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

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

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

 

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

 

 

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

 

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

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

 

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

 

→ Это можно выполнить — через панель управления хостинга или непосредственно на компьютере отредактировать файл 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. и непосредственно в форме добавления нажать «Вставить».

 

Вот и все  good

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

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

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

 

На Joomla

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

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

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

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

 

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

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

7youtube.ru

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

Развивая свой сайт, любой начинающий веб-мастер, однажды придёт к тому, что газетно-журнальный формат сайта ему покажется недостаточно современным и скучноватым. Сайт можно оживить с помощью видео. Видео, для многих владельцев сайтов, просто необходимо. Учебные видеоролики, видео с описание товаров и услуг, видео для просмотра фильмов в режиме онлайн - часто является необходимым атрибутом сайта. Видео - очень удобный, современный и пользующийся популярностью способ подачи и оформления материала для сайта. Вставить видео на сайт можно разными способами, рассмотрим некоторые из них.

 

Вставка видео с помощью видеохостинга YouTube

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

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

1. После успешной регистрации вы попадёте в свой аккаунт. Если у вас уже есть аккаунт Google, вам будет предложено создать канал для видео и после заполнения несложной формы вы сможете добавлять видео. Кликните по кнопке "Добавить видео".

 

 

 

 

 

 

 

 

 

 

 

 

2. Выберите файл на своём компьютере и нажмите "Загрузить". После загрузки изображения, под окном просмотра видеоролика, появится HTML-код, который нам необходим.

 

 

 

 

 

 

 

 

 

 

 

3. Скопируйте HTML-код плеера и вставьте на страницу своего сайта. Размеры плеера можно изменить с помощью атрибутов height и width (высота и ширина). Ниже можете увидеть ролик, который загружен мною для того, чтобы вы могли посмотреть, как это будет выглядеть.

 

 

Вставка видео с помощью видеохостинга RuTube

Сущность этого способа вставки видео идентична вышеописанному.

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

 

1. После успешной регистрации вы попадёте в свой аккаунт. Кликните по кнопке "Добавить ролик"

 

 

 

 

 

 

 

 

2. Через кнопку "Обзор" выберите файл на своём компьютере. Заполните представленную ниже форму (описание, категория). Нажмите "Загрузить"

 

 

 

 

 

3. После загрузки вернитесь на личную страницу и обновите её. Вы увидите загруженный ролик (если ролик находится в обработке, придётся немного подождать). Когда ролик будет готов к просмотру, кликните по нему мышью. В открывшемся окне начнёт воспроизводиться видеоролик. Под ним расположено небольшое меню. Перейдите на вкладку "Ссылка и код" и увидите код плеера.

 

 

 

 

 

 

 

4. Скопируйте код плеера и вставьте на сайт. Размеры плеера можно изменить, изменив в HTML-коде плеера параметры атрибутов height и width.

Мы рассмотрели два аналогичных способа вставки видео на сайт. Они отличаются простотой, но здесь есть небольшой недостаток - предложение просмотра других видео. Это значит, что посетитель вашего сайта, может увлечься другим видео и покинет ваш сайт. Ниже мы рассмотрим иной способ вставки видеороликов, не похожий на предыдущие.

 

Вставка видео с помощью сервиса Uppod.ru

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

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

Для начала нужно зарегистрироваться на сайте. После чего следует выполнить следующие действия:

  • Создайте в корне вашего сайта (там где находится главная страница) три папки: video, styles, и player.
  • Скачайте файл плеера, кликнув мышкой по ссылке "Скачать плеер", которая находится в левом верхнем углу.
  • Распакуйте скачанный архив. Файл плеера uppod.swf закачайте в папку player, которая находится на вашем сайте.

1. После выполненных действий, зайдите в свой аккаунт. Перейдите на вкладку "Плеер" и нажмите "Видео"

>

 

 

 

 

 

2. Появится меню из трех пунктов Стили, Файлы и Плейлисты. Нажмите на "Стили", потом на "+"

 

 

 

 

3. Появится форма, в которую нужно ввести название стиля. Дайте название вашему стилю и нажмите "OK".

4. Подождите пока загрузиться и откроется визуальный редактор. Сделайте необходимые настройки для создания стиля. Нажмите кнопку "Сохранить".

5. Теперь можно скачать стиль. Для этого, сразу после сохранения стиля, нажмите на кнопку "Скачать стили". Или перейдите на вкладку "Плеер". Нажмите на "Видео" - "Стили". Кликните мышкой по названию созданного стиля и в открывшемся меню нажмите "Скачать"

 

 

 

 

 

6. Скачанный файл стиля закачайте в находящуюся на сайте папку styles.

7. Закачайте файл видео, который вы хотите разместить на сайте, в находящуюся на сайте папку video. Имя файла должно быть на латинице.

8. Теперь перейдите на вкладку "Файлы" и нажмите "+" (добавить). Нужно добавить файл, указав его название, ссылку и выбрав стиль плеера. Жмём "OK"

 

 

 

 

 

 

 

 

9. Чтобы проверить правильность путей, перейдите вкладку "Плеер" - "Настройки". Если вы собираетесь создавать плейлисты, создайте папку pl

 

 

 

 

 

 

 

10. Теперь нужно забрать код. Для этого перейдите в меню "Файл". Кликните мышкой по названию видеоролика и нажмите "Код". Полученный код вставьте на свой сайт.

 

 

 

 

 

 

 

 

 

 

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

Мы рассмотрели несколько способов вставки видео на сайт. Существует ещё один, совершенно отличный от предыдущих, способ вставки видео. Это способ с использованием компонента AllVideos Reloaded. Но это материал для отдельной статьи.

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

www.webadvisor.ru