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

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

Небольшое дополнение 28.01.2017.

Только-только опубликовала статью «Как вставить картинку на сайт WordPress» и решила обновить WordPress.  А в новой версии, естественно, новшества. Например, разработчики порадовали сообщением, что они улучшили функцию вставки медиафайла. Вот сейчас и проверим.

Итак, начинаем с админ панели, затем «Записи» → «Добавить запись». Откроется страничка добавления записи (у блоггеров это называется пост или статья):

вставить видео

Пишем статью.

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

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

видео на сайт

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

video3

Ниже еще одно поле: «Настройки отображения вложений». Здесь можно выбрать, будет ли являться видео ссылкой на какую-то страницу. Я выбираю «Нет» и нажимаю «Вставить в публикацию». В статье появляется ссылка на этот видеофайл (на его адрес на нашем хостинге: …wp-content/uploads/2013/05/).

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

Как вставить видео на сайт из интернета (по адресу URL)

Нажимаем «Добавить через URL» и в рамку копируем адрес видео из интернета.

Я покажу процесс вставки на примере одного из моих видео с YouTube.

1 способ:

как вставить видео с ютуб

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

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

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

2 способ: как я сама вставляю видео с YouTube

После нажатия на ссылку «Поделиться» появляются еще ссылки, и среди них «HTML-код». Нажимаем на эту ссылку. Ниже в рамке появится HTML-код.

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

Прежде чем вставлять этот код на сайт, посмотрите на размеры окна, в котором будет проигрываться видео на сайте. Естественно, эти размеры должны быть такими, чтобы ролик полностью разместился в ширину Вашей статьи. Если это не так, то размеры можно поменять прямо в этой рамке, но менять ширину и высоту нужно пропорционально (для тех, кто не знает: ширина – это width, а высота – height).

Но мне самой считать лень, поэтому я иду по ссылке ЕЩЕ, которая находится прямо под рамкой с кодом. Открывается окно предварительного просмотра, где видео показано в тех размерах, которые стоят в рамке. Но нам это не очень-то интересно и мы спускаемся ниже этого окна. Там видим то, что нам нужно: форму для изменения размера окна видео:

Как изменить размер вставляемого на сайт видео

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

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

Где находится режим Текст в редакторе вордпресса

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

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

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

Как вставить аудио на сайт? Смотрите, как вставить видео на сайт, и делайте так же.

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

Комментарии

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">