Шаг №75.Как вставить видео на сайт? Вставить видео на сайт


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

Здравствуйте, уважаемые друзья. Сегодня я расскажу, как вставить и оформить видео и плейлисты с канала YouTube на сайте. А самое интересное то, что видео из плейлиста можно оформить в виде галереи. Что не только красиво смотрится, но положительно влияет на поведенческие факторы.

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

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

Что, согласитесь, гораздо лучше, чем просто размещать видео на своём сайте.

Я, например, тоже записываю видеоролики к своим статьям и размещаю их на канале Ютуб. А в статье делаю ссылку на необходимый урок. А вот видеоурок к этой статье:

Местоположение в статье можно выбрать любое.

Плагин YouTube для WordPress – установка и активация.

Вставить видео с Ютуб можно и без плагина, делается это довольно просто. Но, плагин позволяет оформить плейлисты в виде галереи.

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

Платная версия имеет в дополнение функции SEO, дополнительные виды оформления плейлистов, кэширование и так далее.

Устанавливается плагин стандартным способом. Открываете раздел «Плагины» — «Добавить новый» в поле для поиска вводите «YouTube» и первый, в списке найденных, будет именно этот плагин.

 

Установка плагина

Установка плагина

Нажимаете на кнопку «Установить», а после установки на ссылку «Активировать плагин».

Настройки плагина YouTube.

После установки плагина, в административной панели WordPress появится новый раздел YouTube Free и YouTube PRO.

Основные настройки и описание работы с плагином находятся в разделе YouTube Free. Единственный минус, так это всё на английском языке. Но, и в этом нет ничего страшного так как, во-первых, настройки, установленные по умолчанию, подойдут для большинства сайтов, а во-вторых, есть браузер Google Chrome, который переведёт для вас любую страницу.

Теперь рассмотрим настройки, которые можно подключить в дополнение к основным:

Centering – выравнивает видео по центру странице. Только учтите, что если вы размещаете несколько видео в один ряд по горизонтали, и они не вмещаются по ширине, то они будут расположены по центру, но уже в ряд по вертикали.

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

Default Dimensions – определить размеры плеера по умолчанию. То есть если вы хотите, чтобы все встраиваемые вами видео имели одинаковый размер, выбирайте эту настройку и указывайте ширину и высоту.

Responsive Video Sizing – динамическое изменение окна видеоплеера. То есть видео адаптируется под размеры экранов разных устройств (компьютеры, смартфоны, планшеты).

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

Extra Player Security – подключение дополнительного уровня безопасности. Актуально в том случае, если вы абсолютно не заботитесь о безопасности своего сайта. То есть, если других уровней защиты сайта у вас нет, то включайте эту опции и защитите хотя бы видео.

Auto hide Controls – автоматически скрывать панель управления при воспроизведении видео.

Volume Initialization – начальный уровень громкости. Выставляется в интервале от 0 до 100 процентов.

Playlist Ordering – отображение в плейлисте последнее добавленное видео. Убрав эту опцию, в плейлисте будет отображаться видео, выбранное при установке. Независимо от сроков и добавления новых видео.

Как вставить видео с YouTube в статью с помощью плагина.

Способ №1.

Для того чтобы вставить видео в статью, достаточно скопировать ссылку видеоролика и вставить её в тексте статьи. Но, делать это лучше в режиме редактора «Текст».

Вставка ссылки в текст

Вставка ссылки в текст

Способ №2.

Если вы хотите разместить несколько видео в один ряд по горизонтали, то вам потребуется обернуть ссылки видеороликов в тег [embedyt].

Выглядеть это будет так:

[embedyt]ссылка на 1 видеоролик[/embedyt][embedyt]ссылка на 2 видеоролик[/embedyt]

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

Видео на одной линии

Видео на одной линии

Если нет, то разместятся они друг под другом.

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

Делается это добавлением к ссылке ролика вот такого кода:

&width=400&height=250

И весь код будет выглядеть так:

[embedyt]ссылка на 1 видеоролик&width=400&height=250[/embedyt][embedyt]ссылка на 2 видеоролик&width=400&height=250[/embedyt]

Способ №3.

Этот способ реализует в себе предыдущие два и делается всё через визуальное приложение самого плагина.

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

Кнопка добавления видео

Кнопка добавления видео

В открывшемся окне нажимаете на пункт «Search for a video or channel to insert». Далее, вводите запрос для поиска и нажимаете кнопку «Search».

Поиск видео через плагин

Поиск видео через плагин

В результатах поиска выбираете нужное видео и нажимаете на кнопку «Insert Into Editor». После чего появится ещё одно окошко с двумя вариантами размещения видео:

Insert On A New Line – размещение одного видео;

Insert For Formatting – размещение нескольких видео рядом.

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

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

Выбираете нужный вариант и всё готово. Если нужно добавить второе видео просто повторяете процедуру ещё раз.

Как вставить плейлистс канала YouTube.

Для того что бы вставить плейлист на страницах сайта, нужно проделать следующие действия:

  1. Открыть плейлист на канале Ютуб.
  2. Выбрать видео из плейлиста, с которого будет начинаться показ.
  3. Скопировать ссылку из адресной строки в буфер обмена (CTRL+C).
  4. Вставить ссылку в нужную страницу сайта или виджет (CTRL+V).
Копируете ссылку на плейлист

Копируете ссылку на плейлист

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

Обычный вид плейлиста

Обычный вид плейлиста

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

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

А теперь рассмотрим, как представить плейлсист в виде галереи. Это позволит всем посетителям сразу увидеть все видео, относящиеся к этому листу. Достаточно нажать на миниатюрку и можно смотреть видео.

Как вставить плейлист в виде галереи.

Шаг №1.

Для того чтобы создать плейлист в виде галереи вам сначала нужно получить API ключ YouTube. Для этого пройдите по ссылке https://console.developers.google.com.

Для работы с консолью вам потребуется аккаунт Google. Для его получения нужно зарегистрировать почтовый ящик. Процедуру регистрации я описывал в статье подтверждения авторства Гугл.

Итак, открыв консоль. Нужно создать новый проект. Для этого нажмите на кнопку «API Project» – «Create a project».

Вводите имя проекта и жмёте кнопку «Create».

Создание нового проекта

Создание нового проекта

Имя нового проекта

Имя нового проекта

Далее, переходите в раздел «APIs». Теперь в правой панели нужно поочерёдно пройти по ссылкам, относящимся к YouTube APIs. Для этого нажимаете на первую ссылку «YouTube Data API».

Data_api

Data_api

На следующей странице нажимаете на кнопку «Enable API».

Создание youtube data api

Создание youtube data api

После, возвращаетесь на предыдущую страницу и жмёте на ссылку «YouTube Analytics API».

Analytics_api

Analytics_api

А на открывшейся странице снова жмёте на кнопку «Enable API».

Далее, переходим в раздел «Credentials». В центре странице нажимаете на кнопку «Add credentials»и выбираете ссылку «API key».

Добавление нового ключа

Добавление нового ключа

В новом окошке жмёте по кнопке «Server key».

Серверный ключ

Серверный ключ

Далее, на новой странице нажимаете на кнопку «Create»и получаете API ключ.

Ключ готов

Ключ готов

Копируете ключ в буфер обмена (CTRL+C) и переходите к настройкам плагина на вашем сайте.

Шаг №2.

В административной панели WordPress открываете раздел «YouTube Free» и далее в настройках, в поле «YouTube API Key» вставляете ключ.

Вставка API ключа в плагин

Вставка API ключа в плагин

Далее, настраиваете отображение миниатюр и сохраняете настройки.

Шаг №3.

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

&layout=gallery

Должно получиться примерно так:

https://www.youtube.com/watch?v=STkWe88DetU&list=LLP-KJlIyiqpHpGCwTGnnCww&layout=gallery

Сохраняем статью или страницу и идём проверять. Вот так выглядит галерея плейлиста в бесплатной версии плагина.

Плейлист в виде галереи

Плейлист в виде галереи

Если вам этого мало, то переходите на версию ПРО. Но, думаю, этого вполне достаточно.

Итак, друзья, теперь вы знаете, как быстро, красиво и информативно представить видео на сайте.

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

Желаю вам удачи и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.

Адаптивная, SEO подготовленная WordPress тема

1zaicev.ru

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

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

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

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

Первый способ: Youtube

Наиболее популярный сайт для размещения видео – youtube. Здесь можно найти практически всё, что угодно. Для того, чтобы вставить youtube видео на сайт, нужно сделать следующее:

  1. Откройте страничку того видео, которое вы хотите вставить.
  2. Нажмите «Отправить», а затем «Встроить».
  3. Перед вами откроется окошко с кодом, четыре пункта, которые можно настроить, и опции выбора размера окна, в котором будет ваше видео. Если ни один из вариантов вас не устроит, вы можете ввести свои размеры в пикселях в специальных полях. Пропорции будут сохраняться, так что вам нужно ввести только ширину или высоту.
  4. Обратите внимание на галочку «использовать старый код встраивания». Его следует использовать, если с обычным кодом видео на сайте не воспроизводится.
  5. Теперь войдите в HTML-редактор и вставьте там код.
  • Wordpress. Нажмите на вкладку HTML. Теперь вставьте код в основное поле. Посмотреть, что получилось, можно, перейдя во вкладку «Визуально».
  • LiveJournal.com. Точно также, переходим во вкладку HTML, вставляем видео и просматриваем в «Визуальном редакторе». Если не вышло – используйте старый код.
  • Blogger.com. Вкладка «Изменить HTML», туда вставляем код и проверяем.

Второй способ

elhow.ru

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

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

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

плеер uppodДавайте научимся хранить свои видеофайлы на хостинге, там, где Вы держите свои сайты. И использовать для этого Вы будете замечательный сервис uppod.ru.

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

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

Немаловажно также и то, что плеер Uppod поддерживает множество форматов видео, в том числе один из самых распространенных форматов: mp4.

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

  1. видео uppodСначала Вам нужно зарегистрироваться на видеосервисе Uppod. Заходите по адресу uppod.ru и нажимаете на кнопку Регистрация. Дальше еще проще: придумываете логин и проверяете, свободен он или нет, пишете e-mail, придумываете пароль и повторяете его. Потом нажимаете на кнопку Готово. При последующих входах Вы будете нажимать на кнопку Войти, вводить свой логин и пароль и попадать на сервис под своим именем.
  2. хостинг JinoНа хостинге, на котором Вы хотите вставить видео на сайт,  например, на хостинге Джино, Вам нужно будет выделить место, где Вы будете хранить Ваши видео. Место хранения может быть достаточно произвольным. К примеру, можно создать в корневой папке своего домена папку VideoUppod специально для этой цели. В этой папке нужно разместить еще три папки: video, styles и player. Можете при этом использовать программу Total Commander.
  3. Потом скачиваете файл плеера uppod.swf с сайта Uppod, нажав на ссылку Скачать плеер. Распаковываете скачанный архив, берете файл плеера, и закачиваете в папку player на своем хостинге.
  4. Выбираете внешний вид плеера, нажав на пункт меню Скины. Готовые стили плееров можно посмотреть, нажав на любое видео из предложенных. Стилей огромное количество, выбираете из них понравившееся, и нажимаете Сохранить. После этого нажимаете Собрать — Плеер — Видео — Стили и в стилях увидите свой стиль, который Вы только что сохраняли. Выделяете его и выбираете пункт меню Скачать. Закачиваете файл на компьютер. Потом закачиваете в папку styles на хостинге сохраненный на компьютере файл.
  5. вставить видео на сайтИ, напоследок, в папку video на хостинге закачиваете свой видеофайл. Только проверьте, чтобы формат Вашего видео соответствовал тому, который поддерживается плеером Uppod. Посмотреть список форматов Вы можете по этой ссылке.
  6. После этого на видеосервисе Uppod Вы выбираете Собрать -Видео — Файлы, нажимаете на «+» , пишете название для Вашей записи, ссылку на Ваш ролик, а также выбираете стиль и нажимаете ОК.
  7. Потом Вы проверяете, правильно ли Вы все сделали. Нажимаете на видеосервисе Uppod на пункт меню Настройки, и в окошках указываете путь к плееру, и к папке со стилями. Окошко для плейлистов заполнять не нужно, так как плейлисты Вы не создавали. Нажимаете на кнопку Сохранить.
  8. вставить видео на сайтЧтобы забрать код, переходите в Плеер — Видео — Файлы, выбираете свой видеофайл, потом выбираете Код и копируете себе html код, который Вам нужно будет потом поставить на страницу сайта, там, где Вы хотите видеть свой ролик.

Как вставить видео на сайт, используя видеосервис Uppod

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

Также на видеосервисе Uppod можно создавать собственные стили. Для этого нужно зайти в Плеер — Видео — Стили, создать новый стиль и в этом стиле выбрать опцию Редактирование.

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях. Это не займет много времени. Просто нажмите на ссылку ниже:     Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

pro444.ru

Шаг №75.Как вставить видео на сайт? « Создание сайта на Wordpress с нуля для новичка

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

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

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

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

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

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

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

2)Находим необходимое видео в поиске, либо добавьте новое видео в Youtube:

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

3)Выберите файлы для загрузки или перетащите их мышкой в окно браузера.

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

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

5)Покажу на примере своего первого видеоурока как дальше необходимо вставлять видео на сайт.Находим нужный файл, и кнопочку поделиться.

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

6)Нажимаем на нее и дальше выбираем кнопку HTML- код.

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

7)Теперь выбираем размер видео, и копируем получившийся код.

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

Данный код теперь необходимо разместить в записи или страницах вашего сайта в режиме HTML.

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

Для того что бы разместить видео посередине необходимо вначале и в конце поставить тег <center></center>

Вот так:

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

Сохраняйте страничку, и можете перейти к просмотру видео.Вот такая несложная инструкция поможет Вам вставить видео на сайт.

wpcreate.ru