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

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

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

Сегодня речь пойдет о способе подключения видео при помощи тегов html5. Это удобно в том случае, если у вас нет своего канала на Youtube, а ролик отснят, находиться на компьютере и требуется его выложить на лендинг.

Как вставить видео на сайт при помощи тегов html5

В общем случае, для того чтобы встроить видео на сайт при помощи тега html5, достаточно одной строчки:

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

Для того, чтобы это исправить необходимо сохранить видео в нескольких форматах и дописать несколько строчек кода. Наиболее популярные это: mp4, webm, ogg. Или даже не наиболее популярные, а те, которые позволяют осуществить максимальный охват. (Если будет интересна эта тема – пишите в комментариях, я сделаю обзор какой-нибудь программы для конвертирования видео)

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

Формат не поддерживается

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

Дело в том, что браузер в первую очередь проверяет его. Атрибут “poster” – задает изображение, которое будет выводиться до начала воспроизведения. (Если быть точным, то до определения того формата, который может воспроизвести)

Но и это еще не все. Старые браузеры не поддерживают теги html5 (ну, или частично поддерживают). В таком случае нам необходимо подстраховаться и сказать браузеру, чтобы он пытался воспроизвести видео при помощи flash– плеера.

Формат не поддерживается

Как вы могли заметить, я добавил атрибут «controls» — для того, чтобы появились элементы управления, такие как перемотка, пауза и т.д. А также тег . Он говорит браузеру что нужно делать, если не один из форматов невозможно воспроизвести. В нашем случае — это попытка открыть видео во flash-плеере и, в случае неудачи, выдать сообщение о том, что формат не поддерживается.

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

• autoplay — автоматическое начало воспроизведения видео.
• height, width — высота и ширина.
• preload — буферизация видео (предзагрузка как в ютубе)

А на сегодня — все. Теперь вы знаете, как добавить видео на сайт при помощи тегов html5. Скоро я расскажу вам, как встроить видео на сайт из Youtube. Пока!

Источник: smartlanding.biz

Html теги для вставки видео на сайт

Всем привет. Сегодня я поделюсь с вами html тегами для вставки видео на свой сайт. По сути, сегодня я их рассмотрю всего 3 штуки, самых распространенных.

Как вставить видео с помощью html5?

Итак, версия html5 подарила нам новые теги, в числе которых есть и video. Чтобы вставить видео с помощью этого тега, в самом минимальном случае нам понадобится его написать, а в его содержимом указать 1-3 одинарных тега source, в которых указать путь к видеоролику. Вот так:

Результат:

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

Атрибуты тега video

Давайте кратко пробежимся по атрибутам тега video . Как вы могли заметить, я прописал размер видео с помощью атрибутов width и height, но вообще это можно без проблем делать и через css. Остальные атрибуты:

1. controls — добавляет к видео элементы управления. То есть можно будет останавливать его, расширять, изменять громкость.
2. autoplay — если этот атрибут задан, то воспроизведение видео начнется сразу после загрузки веб-страницы. Учитывайте, что это может раздражать пользователей.
3. loop — если прописан этот параметр, то видео начнется сначала сразу после своего завершения. В некоторых случаях актуально, когда видео короткое, например.
4. preload — позволяет начать загрузку видео вместе с загрузкой веб-страницы. Спорная возможность. С одной стороны, так пользователь сможет кликнуть по видео и сразу начнется его воспроизведение. С другой, у многих людей ограничен трафик. Возможно, они и не хотят смотреть видео, а оно у них грузиться и забирает трафик. Так что смотрите сами, как вы будете использовать этот параметр.
5. poster — позволяет задать картинку-постер, которая будет выводиться, когда видео еще не включено.

Это все атрибуты этого тега. Естественно, все они необязательные.

Атрибуты тега source и как правильно добавить видео на страницу?

Как я уже говорил, что source — это одинарный тег. Вообще у него есть всего 1 обязательный параметр — src . Это путь к видеоролику. Важно прописать его правильно. Помимо этого, есть атрибут type , но для современных браузеров его прописывать необязательно, так как они сами умеют определять расширение видео. Но если что, вот значения атрибутов type для разных форматов видео, может быть вам пригодится:
Ogg — type=’video/ogg; codecs=»theora, vorbis»‘
mp4 — type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘
webm — type=’video/webm; codecs=»vp8, vorbis»‘

В общем, в чем вся фишка вставки видеофайла через тег video ? В том, что разные браузеры поддерживают разные форматы. Наиболее оптимальным форматом является как раз mp4 — его поддерживают все, кроме Opera. Так что если вы хотите, чтобы владельцы оперы тоже видели видео, нужно его вставлять еще в одном формате. Например, в формате ogg. Его opera поддерживает. В таком случае напишем вот что:

Вот и все. Атрибуты рассмотрели, момент с расширениями тоже рассмотрели. Теперь вы знаете, как вставлять видео в html5. Какие-то оформительские вещи вы можете прописать через css. Естественно, видео вам придется грузить себе на сервер.

Вставка видео через тег iframe

Есть и другой вариант вставки видео. Он актуален для роликов с ютуба, например. Когда вы смотрите видео, нажмите ниже на вкладку Поделиться, после чего выберете html-код. Вот этот код вставьте себе на сайт в нужное вам место. Например, вот вам топ-10 голов прошедшего Евро-2016:

Соответственно, прописывается ширина и высота фрейма, далее в атрибуте src нужно указать адрес видео с youtube. Атрибут allowfullscreen разрешает при необходимости расширить видео на весь экран. В общем-то, тег имеет и другие атрибуты, но они вам не нужны.

Итог

Вот такие 2 способа. Второй подойдет для видеороликов, которые уже есть на youtube, первый — для собственных видео, которые вы загружаете непосредственно на сервер и не хотите публиковать на ютубе. Используйте их, они актуальны. Если какие-то вопросы, пишите в комменты.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

Все прекрасно! Только неплохо было бы написать примерчик добавления в код атрибутов. Я хотел добавить постер и автоплей и, следуя вашему примеру, добавил в код: Но ничего не получилось, причем не только автовоспроизведение не работает, но и принудительно невозможно запустить ролик, есть значок регулировки громкости, но он тоже не шевелится. Возможно, сие все потому, что у меня операционная система ХР

2017-06-05 в 6:27 | Ответить

Спасибо разобрался, вот пример сайта http://gms-partners.ru/ на котором реализован код через iframe
2017-05-26 в 8:17 | Ответить

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

2017-02-27 в 3:14 | Ответить

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

2017-02-28 в 11:48 | Ответить

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

Источник: dolinacoda.ru

Как вставить на сайт видео с Youtube по шагам

У многих людей до сих пор возникает один и тот же вопрос: — Как вставить видео с Yuotube на сайт. Этот вопрос по логике не должен был бы возникать, но раз он есть, то я решил ответить на него на собственном примере по шагам.

Итак, вам понравилось какое-то видео на видеохостинге Youtube и вы решили поделиться ими со своими посетителями или друзьями, но не знаете, как вставить это видео с youtube.

Как вставить видео с YouTube на блог — видеоурок инструкция

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

В видео я покажу вам то, пошаговую инструкцию как вставить видео с YouTube на блог на CMS WordPress, Livejornal, Liveinternet, Blogger.

Плагин называется Smart YouTube PRO. Ссылка на скачивание — http://wordpress.org/extend/plugins/smart-youtube/

Подписывайтесь на мой канал, мне будет интереснее публиковать свои видео материалы.

Присылайте свои вопросы мне, за них вы получите подарок, а я тему для видео или статьи. Мне важны ваши вопросы! Слать вопросы сюда — https://zarabotokwmz.ru/zadaj-vopros-poluchi-podarok

Дальше читайте почти то же самое в виде статьи.

Сразу под окном с видеороликом есть небольшой ряд кнопок. Вам нужно нажать на кнопку “Отправить”.

Шаг 1, нажимаем на отправить

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

Шаг 2, нажимаем на встроить

Если вы знаете, какого разрешения вам нужно видео, то выбирайте стандартное или даже персонализированное. Здесь же вы можете поставить галочку напротив “Использовать старый код встраивания”. Если его не ставить, то код, который вам даст сервис, будет иметь вставку во фрейме, а это не всегда работает, но вы можете вставить и его, попробовав тем самым на сайте. Но, часто такой код не работает.

Шаг 3, выбираем размер и копируем код

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

По просьбе моих любимых посетителей обновил картинку с параметрами вставки

Вот и сама вставка кода. А раз это код, то и вставлять его нужно в код.

Как вставить видео с Youtube на блог работающий на WordPress

Вам нужно нажать на кнопку “HTML” сразу под полем, куда вносится заголовок. А в основное поле уже вставляете полученный на youtube.com код с видео. Посмотреть, что у вас получилось можно после того, как нажмёте на кнопку “Визуально”.

Вставляем видео с youtube на блог работающий на wordpress

Как вставить видео с Youtube на блог на сервисе LiveJournal.com

Здесь тоже самое, что и на обычном самостоятельном блоге. Выбирать нужно тоже кнопку “HTML” рядом с полем ввода заголовка. Вставили и тут же можно посмотреть результат после нажатия на кнопку рядом “Визуальный редактор”.

Вставляем видео с youtube на блог на сервисе LiveJournal.com

Как вставить видео с Youtube на блог на сервисе Blogger.com

Опять тоже самое. Вам нужно найти поле, в которое можно вставлять html код видеоролика. Тут кнопки расположены наоборот, в отличие от двух предыдущих. Вам нужно нажать на кнопку “Изменить код”, а посмотреть результат можно нажав на кнопку “Создать”.

Вставляем видео с youtube на блог на сервисе Blogger.com

Вот что у вас должно получиться:

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

1. Как установить фон на свой канал YouTube
2. Как легко поставить кнопки социальных сетей и закладок на сайт
3. Как бесплатно наполнить свой сайт или блог статьями в Gogetlinks
4. Меняем фон на своём блоге на CMS WordPress
5. Как настроить бэкап блога WordPress на Dropbox

Источник: zarabotokwmz.ru