Как вставить видео с youtube на сайт,смотреть видео на сайте html | Блог Геннадия Королева

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

 

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

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

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

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

Прежде, чем отправить видео-файл , его нужно залить на один из видео-хостингов. Наиболее известные из них – это сервис YouTube и  RuTube. Рассмотрим YouTube.

 

Посетите сайт http://youtube.com  Нажмите кнопку Войти или Добавить видео

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

Вам предстоит процедура создания аккаунта , нажимаем кнопку СОЗДАЙТЕ АККАУНТ.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

Перед вами новое окно, находим кнопку  Выберите файлы из компьютера и кликаем.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

Выберите из файлов  компьютера нужный, нажмите кнопку Открыть. Пойдет процесс закачки файла на сервис, а вам предложат заполнить информацию о видео-файле.

Про каждый ваш видео- файл я советую уже заранее в отдельной папке  компьютера иметь следующую информацию:

- Название

- Описание

- Теги (набор ключевых слов, по которым будут искать ваше видео в Интернет)

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

В графе Категория выберите нужную, в других —  Настройки конфиденциальности – Для всех, Лицензия и права собственности оставьте, как есть. Не забудьте нажать Сохранить изменения.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

Разберем два простых способа.

1.    С помощью кода html

Чтобы добраться до кода html, нажмите  треугольничек рядом с вашим фото и в выпадающем меню выберите Менеджер видео.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

 

Появится страница со всеми вашими видео, щелкните по изображению нужного вам . Откроется окно со всей информацией о данном видео-файле.

Нас интересует кнопка Поделиться, жмем.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

Выпадет новое окошечко, копируем ссылку слева (она нам пригодится, когда будем рассматривать способ 2 ) и жмем  кнопку Сгенерировать HTML код.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

Осталось только вставить код html  в пост и смотреть, что получилось. Идем в консоль нашего блога WordPress, в раздел Записи и открываем нужную Запись. Затем переводим текстовый редактор в режим HTML.

Для этого в правом верхнем углу нажимаем слово HTML. Визуальный редактор перейдет в режим html. Найдите нужное вам место и вставьте полученный код.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

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

2.    С помощью электронного адреса

Когда мы открывали нужный видео-файл с помощью менеджера файлов и жали  кнопку Поделиться ( см выше ), я просил вас сохранить ссылку слева.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

Для этого мы в визуальном редакторе нужной нам записи или страницы находим и жмем кнопку Вставить/редактировать медиафайл.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

В появившемся окне в поле Файл/URL вставляем скопированную нами ссылку на видео. При желании можно изменить размеры плейера (Размеры ), сохранять или нет пропорции ( Сохранять пропорции ), поглядеть предварительно  рисунок плейера ( Просмотреть ). Затем жмем Вставить.

 Как вставить видео с yuotube на сайт,смотреть видео на сайте,html

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

Кроме этих способов, есть и другие способы смотреть видео на сайте html. Я обязательно об них напишу в следующих статьях, следите за новостями блога.

Хочу добавить, что информацией в данной статье Как вставить видео с youtube на сайт можно воспользоваться и тогда, когда видео-файл закачен на другой видео-хостинг – RuTube и т.п. Принцип один,   вы должны получить или код или URL, а дальше по проторенной дорожке ( см выше ).

P.S. До окончания конкурса остался один день. Вся информация о нем в статье  Сегодня День Рожденья твой

Для вас работал Геннадий Королев.

Картинки фото смешно

 

Картинки фото смешно Геннадий Королев Gennady Korolev

Жена Кощея Бессмертного в Анталье…

 

Получил полезную информацию? Поделись с друзьями в :

Похожие статьи

 

Получил полезную информацию? Поделись с друзьями в :

Нравится
Опубликовано 30.08.2012 в 19:31 · Автор Геннадий Королев · Ссылка
Рубрики: Все технические моменты · Теги: ,

2 комментария

Подписаться на комментарии по RSS

  1. Написал(-а) Галина
    02.09.2012 в 15:09
    Ответить · Ссылка

    Надо будет применить при случае, лишь бы не запутатьсяю

  2. Написал(-а) Евгения
    27.01.2013 в 18:42
    Ответить · Ссылка

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

Подписаться на комментарии по RSS

Написать комментарий