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


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

Приветствую друзья. Сегодня я расскажу, как вставлять видео с Youtube на сайт. Честного говоря, я считал, что вставлять видео на свой сайт умеет каждый начинающий вебмастер, ведь сложного в этом ничего нет. Но, на нескольких форумах я встретил такой вопрос, а затем вспомнил, что, в начале, своей вебмастерской карьеры забил все 2 гигабайта своего хостинга видео файлами, вместо того, чтобы выкладывать их в Ютуб и вставлять на блог уже оттуда (не знал я, что так можно).

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

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

Для чего вставлять видео на сайт

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

Но, все-таки, свой сайт действует более эффективно, так как позволяет использовать разные виды контента.

1. Улучшение поведенческих факторов

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

2. Увеличение конверсии

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

3. Дополнительная аудитория

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

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

Существует два способа вставить на сайт свое видео.

  • Выложить файл с роликом на свой хостинг, подключить видео плеер и транслировать кадры прямо со своего сервера. Для обычного сайта этот вариант не самый лучший, так как такие файлы занимают много места (десятки и сотни мегабайт), а их трансляция одновременно большому числу зрителей создаст вашему серверу немалую нагрузку.
  • Разместить клип на видео хостинге (Youtube, Rutube), а для трансляции на страницах, использовать специальный код. В таком варианте все нагрузки ложатся на сервера видео хостинга, вы экономите место и снижаете нагрузку на сервер. Кроме того, Ютуб имеет огромную аудиторию и это дополнительный канал продвижения.

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

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

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

1. Стандартные настройки кода

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

Под каждым видео есть блок с настройками и описанием. В этом блоке необходимо найти ссылку «Поделиться» и нажать на нее. В раскрывшейся панели переключаемся на HTML код.

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

Как правило, требуется корректировка размеров, встраиваемого видео. Для этого нажимаем на ссылку «Ещё», которая открывает дополнительную панель.

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

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

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

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

2. Дополнительные (скрытые) настройки

Автоматическое воспроизведение видео с Youtube

Включить или отключить автоматическое воспроизведение видео на Youtube можно с помощью элемента «&autoplay=». Если после знака равно стоит 1, то видео будет автоматически запускаться, если такого элемента нет или он равен 0, то автозапуска не будет. Добавляется элемент таким образом:

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

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

Запуск видео с определенного момента

Можно настроить проигрыватель таким образом, чтобы ваш ролик запускался не с начала, а с указанной заранее секунды. Для этого добавляется «#t=». После знака равенства указывается время (отдельно минуты, отдельно секунды). Выглядеть будет вот так:

<iframe src="https://www.youtube.com/embed/dHhKIs1LXJ0#t=2m30s" frameborder="0" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/dHhKIs1LXJ0#t=2m30s" frameborder="0" allowfullscreen></iframe>

Добавление субтитров

Русские субтитры включаются следующим кодом «&cc_lang_pref=ru&cc_load_policy=1». В инструкции от Youtube говорится, что язык субтитров переключается с помощью значения cc_lang_pref. RU означает русские, но мой эксперимент показал, что и при FR (французский) все равно показываются русские субтитры. Код выглядит вот так:

<iframe src="https://www.youtube.com/embed/dHhKIs1LXJ0«&cc_lang_pref=ru&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/dHhKIs1LXJ0«&cc_lang_pref=ru&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>

Когда код полностью готов, переходим к его вставке на страницу.

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

Для установки открываете HTML файл вашего сайта в текстовом редакторе (notepad+, akelpad или др.). Находите в коде место, где должно выводиться видео и добавляете, полученный ранее, код. После сохранения на вашей странице появится проигрыватель с теми настройками, которые вы сделали.

Нашел специально страницу, которую делал давно на HTML со встроенным видео, вот как там выглядит такой код:

4. Установка кода с Ютуб на WordPress

Процедура вставки кода на WordPress ничем не отличается, разве что делается все проще. Не нужны текстовые редакторы.

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

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

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

5. Как вставить видео на Ucoz, Blogspot, Livejournal

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

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

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (width=»560″ height=»315″), только пропорции подберите подходящие.

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

На этом у меня все. Удачи.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(15 голосов, в среднем: 4.8 из 5)

biznessystem.ru

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

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

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

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

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

Шаг 1: Поиск HTML-кода

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

открытие html-кода на ютубе

Вам остается всего лишь взять этот код (скопировать, «CTRL+C»), и вставить («CTRL+V»)его в код своего сайта, в желаемое место.

Шаг 2: Настройка кода

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

открытие дополнительных настроек html-кода

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

выбор размера вставляемого видео на ютубе

Здесь вы можете задать также ряд других параметров:

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

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

Варианты вставки видеоролика на сайт

Многие пользователи, решая создать свой сайт не всегда знают, как вставлять ролики с Ютуба на него. А ведь данная функция позволяет не только разнообразить веб-ресурс, но и улучшить технические стороны: нагрузка на сервера становится в разы меньше, так как она полностью идет на сервера Ютуба, а в довесок к этому на них остается куча свободного места, ведь некоторые видеозаписи достигают громадного размера, исчисляемого в гигабайтах.

Способ 1: Вставка на HTML-сайт

Если ваш ресурс написан на HTML, то для вставки видео с Ютуба вам нужно открыть его в каком-то текстовом редакторе, например, в Notepad++. Также для этого вы можете использовать и обыкновенный блокнот, который есть на всех версиях Windows. После открытия найдите во всем коде место, куда хотите поместить видео, и вставьте ранее скопированный код.

На изображении ниже вы можете просмотреть пример такой вставки.

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

Способ 2: Вставка в WordPress

Если вы хотите поместить ролик с Ютуба на сайт с помощью WordPress, то делается это еще проще, чем на HTML-ресурсе, так как нет необходимости использовать текстовый редактор.

Итак, чтобы вставить видео, откройте сначала сам редактор WordPress, после чего переключите его в режим «Текст». Отыщите место, в котором вы хотите разместить видео, и вставьте туда HTML-код, который вы взяли с Ютуба.

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

Способ 3: Вставка на сайты Ucoz, LiveJournal, BlogSpot и им подобные

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

Ручная настройка HTML-кода плеера после его вставки

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

Изменение размера плеера

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

Необходимо знать лишь два элемента и то, за что они отвечают. Элемент «width» — это ширина вставляемого проигрывателя, а «height» — высота. Соответственно, в самом коде вам нужно заменить значения этих элементов, которые указаны в кавычках после знака равно, для изменения размера вставляемого плеера.

изменение размеров видео в его html-коде

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

Автоматическое воспроизведение

Взяв HTML-код с Ютуба, вы можете его немного переделать, чтобы при открытии вашего сайта у пользователя видео воспроизводилось автоматически. Для этого необходимо использовать команду «&autoplay=1» без кавычек. К слову, данный элемент кода нужно вписывать после самой ссылки на видео, как это показано на изображении ниже.

настройка автоматического воспроизведения видео в его html-коде

Если вы передумаете и захотите отключить автовоспроизведение, то значение «1» после знака равно (=) замените на «0» или же полностью удалите этот элемент.

Воспроизведение с определенного места

Также вы можете настроить воспроизведение с определенного момента. Это очень удобно, если нужно посетившему ваш сайт пользователю показать фрагмент в видео, о котором идет речь в статье. Чтобы все это сделать, в HTML-коде в конце ссылки на ролик необходимо добавить следующий элемент: «#t=XXmYYs» без кавычек, где XX – это минуты, а YY – секунды. Обратите внимание, что все значения необходимо записывать в слитной форме, то есть без пробелов и в числовом формате. Пример вы можете посмотреть на изображении ниже.

настройка воспроизведения видео с определенного момента в его html-коде

Чтобы отменить все сделанные изменения, вам необходимо удалить данный элемент кода или же поставить время на самое начало – «#t=0m0s» без кавычек.

Включение и отключение субтитров

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

Читайте также: Как включить субтитры в YouTube

Для отображения субтитров в видео вам нужно использовать два элемента кода, вставленных последовательно. Первый элемент – «&cc_lang_pref=ru» без кавычек. Он отвечает за выбор языка субтитров. Как можно заметить, в примере стоит значение «ru», что означает – выбран русский язык субтитров. Второй – «&cc_load_policy=1» без кавычек. Он позволяет включать и отключать субтитры. Если после знака равно (=) стоит единица, то субтитры будут включены, если ноль, то, соответственно, выключены. На изображении ниже вы можете увидеть все самостоятельно.

настройка включения субтитров в видео в его html-коде

Читайте также: Как настроить субтитры в YouTube

Заключение

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

Мы рады, что смогли помочь Вам в решении проблемы. Задайте свой вопрос в комментариях, подробно расписав суть проблемы. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

Да Нет

lumpics.ru

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

Здравствуйте, дорогие читатели! С увеличением скорости интернета, видео в блоге стало не роскошью, а, чаще, необходимостью. Поэтому сегодня подробно расскажу как вставить видео с Youtube на свой сайт. Затрону и простые сайты на одном html и поясню, почему лучше хранить видео на Ютубе, чем заливать на свой сайт. Поехали!

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

Заходим на Ютуб и находим видео, которое нас интересует. Находим под видео кнопку «Поделиться». Для вставки на сайт выбираем «HTML-код».

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

Можно сразу скопировать полученный код и добавить на блог, но я рекомендую перед этим перейти в настройки. Нажимаем «Еще».

Как перейти в настройки youtube

Нам открывается раздел Youtube с настройками видео.

Настройки видео ютуб перед вставкой на сайт

Поясню что они значат и какие из них вам нужны.

  • Размер видео — выбирайте под ширину вашего сайта. Если у вас адаптивный сайт, проверьте отображение на мобильных устройствах. При качественной верстке видео будет подстраиваться под ширину;
  • Показывать похожие видео после завершения просмотра — если вы добавили видео строго по теме, то рекомендую убрать галочку. Для развлекательных проектов и где задача удержать как можно больше посетителя на сайте — оставляйте;
  • Показывать панель управления — рекомендую включать: очень раздражает, когда не можешь промотать или остановить ролик;
  • Показывать название видео и функции проигрывателя — по желанию;
  • Включить режим повышенной конфиденциальности — если включить этот режим, то Youtube будет сохранять информацию о посетителях только в том случае, если они досмотрят ролик до конца. На деле ни на что не влияет.

Помимо видимых настроек, есть те, которые скрыты — дополнительные настройки видео:

  • autoplay=1 — начинает воспроизводить видео сразу после загрузки страницы. Не рекомендую;
  • loop=1 — зацикливает видео;
  • fs=0 — запрещает разворачивать видео на весь экран. Убирает соответствующую кнопку на панели управления;
  • fmt=6 — задает качество видео. fmt=18 — среднее, fmt=22 — наилучшее. Полезно применять только если у вас красивый красочный ролик, смысл которого именно передать красоту. Во всех остальных случаях советую оставить это на выбор зрителя;
  • iv_load_policy=3 — один из самых полезных параметров. Отключает аннотации к видео, такие как ссылки на канал автора и его другие ролики. Но не отключает рекламу Google.

Добавлять параметры просто: в коде после идентификатора видео добавляем знак «?» и пишем параметры, перечисляя их через «&». Ниже правильный пример:

<iframe src="https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

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

Переключиться в режим html в WordPress

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

Пример вставленного видео с ютуба на сайте

Если у вас сайт написан на одном html, или это просто локальных html-файл — инструкция точно такая же. Повторяйте.

Почему видео лучше заливать на Youtube, а не на свой сайт

Уверен у многих возник вопрос: как добавить видео, которое лежит на компьютере, а в интернете его нет? Тут есть 2 варианта:

  • Загрузить на свой хостинг;
  • Загрузить на Ютуб.

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

Во-вторых, если видео-файл лежит у вас на хостинге, то каждый просмотр — создает лишнюю нагрузку на сервер, она вам нужна?)

Преимущества размещения на сервисе Youtube очевидны — неограниченное пространство, и вся нагрузка ложится на Ютуб.

Теперь, когда вы знаете как вставить видео на свой блог, я прощаюсь с вами. Добавляю видео, как обещал. Посмотрите, очень красиво сняли.

webvim.ru

Как вставить видео на сайт взятое с youtube или свой видеофайл, лежащий на своем хостинге!

Как вставить видео на сайт Здравствуйте ребята! В сегодняшней статье я хотел бы рассказать вам о том, как вставить видео на сайт, взятое с Youtube или же какой-то свой видеоролик, который лежит на вашем хостинге. Какой-то mp4, avi и т.д. файл.

Часто у новичков, начинающих знакомиться с сайтостроением возникает, по их мнению, неразрешимая задача «Как вставить видео на сайт?». Но не всё так сложно, как кажется на первый взгляд.

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

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

Первый и самый популярный способ — это добавление видео на страницы сайста c видеопорталов, таких например, как YouTube или Rutube.

Начнём пожалуй с YouTube:

1. Зайдём на сайт видеопортала youtube.com и создадим свой аккаунт (т.е. зарегистрируемся).

2. Теперь, когда вы зарегистрировались, вы можете загружать на сервис своё видео. Для этого нужно нажать кнопку «Добавить видео», которая находится в верхнем правом углу веб-страницы.

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

3. После клика по кнопке «Добавить видео» у вас в браузер загрузится страница по адресу youtube.com/upload

видео с youtube

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

Выбор файла для загрузки

5. Если формат вашего видео-файла корректный, то начнётся загрузка. И в прогрессбаре будет указан процент загрузки и оставшееся время.

Полоса загрузки

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

Добавляем описание к видео

Например, вот так:

Описание готово

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

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

7. После того как видео загружено и обработано, чтобы сделать его доступным для всех, нажимаем кнопку «Опубликовать».

Опубликовать видео

8. И переходим по ссылке «Адрес опубликованного видео» адрес которой ведёт на страницу непосредственно с самим видео.

Видео добавлено

Теперь я вам предлагаю либо ознакомиться с дальнейшими шагами с помощью вот этого видео:

Либо продолжить читать мою статью дальше.

9. Под видеоплеером находится меню. Выбираем пункт «Поделиться».

Поделиться видео

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

Ссылка поделиться

11. Это завершающий этап. В пункте «Размер видео» можно выбрать ширину и высоту области, которая будет выделена под видео-ролик на вашей странице. Для чего это нужно? Чтобы видео гармонично вписывалось в содержимое, и например не выходило за рамки области, отведённой для контента.

Также ставим галочку напротив пункта «Использовать старый код встраивания», так как данный вариант кода более надёжный. А теперь копируем всё содержимое строки, которая выделенная голубым цветом — это и есть необходимый HTML-код для встраивания видео на ваш сайт.

HTML код видео

P.S. Есть более простой способ получения HTML-кода видео. Для этого можно пропустить пункты 9-11. Просто щёлкаем правой кнопкой мыши по области видео-ролика и выбираем пункт «Получить код для встраивания»

Скопировать код видео

И копируем HTML-код из выплывающего поверх видео-ролика окна.

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

Принципы получения HTML-кода с других видеохостингов (Rutube, ВКонтакте) подобны описанному выше способу. Всё легко и просто, однако у всех этих вариантов есть и недостатки.

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

Получение кода видео из социальной сети ВКонтакте:

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

Получение кода видео c видеохостинга Rutube:

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

Поговорим теперь о втором способе, который не требует использования сторонних сервисов. Но для начала нам предстоит переконвертировать видео в формат .swf. Сделать это я предлагаю вам с помощью программы Format Factory (которую вы можете скачать совершенно бесплатно).

1. После того как вы скачали программу и установили на свой компьютер, запустите её, чтобы осуществить конвертацию. Щёлкнем по меню «Видео».

format factory

2. Найдём на своём компьютере файл с видео и перетащим его в область (на рисунке ниже она обведена красной рамкой).

Обработка видео

3. После того, как вы перетащили файл с видео, поверх главного окна программы откроется модальное окошко, где нужно выбрать необходимый нам формат. Выбираем формат .swf и нажимаем кнопку «ОК».

Формат swf

4. Как видите, видеофайл добавился в список для конвертации. Выделим его (чтобы строка стала синей, как на рисунке ниже), кликнув левой кнопкой мыши по строке, и нажмём кнопку «Старт».

Конвертация видео

Начнётся конвертация.

Началась конвертация

Дождёмся, когда она будет выполнена.

Конвертация завершена

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

Открыть конечную папку

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

Файл swf сконвертированный

6. Теперь через FTP «заливаем» файл видеоролика на свой сайт.

7. А в веб-страницы добавим следующий код:

1 2 3 4 5 <object> <param name="movie" value="video.swf"> <embed src="video.swf"> </embed> </object>

<object> <param name="movie" value="video.swf"> <embed src="video.swf"> </embed> </object>

Готово! Минус этого варианта в том, что видео будет воспроизводиться на странице автоматически при её загрузке и его нельзя будет поставить на паузу. На этом у меня все. Всем пока.

Автор статьи: Анна Вечеркина

isif-life.ru

Вставить видео с YouTube на сайт WordPress. Простые способы

Здравствуйте друзья! В предыдущей статье из рубрики YouTube мы разобрали как скачать видеоролик с YouTube, а сейчас разберем несколько вариантов как вставить видео с YouTube на сайт с движком WordPress.

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

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

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

Зачем вставлять видео на сайт?

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

Лучшее восприятие информации

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

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

Улучшение поведенческих факторов

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

Дополнительная аудитория

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

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

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

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

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

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

Стандартный код для вставки видео

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

  1. Под роликом находим и нажимаем кнопку Поделиться
  2. Выбираем вкладку HTML-код
  3. Получаем исходный код для вставки на сайт
  4. Вставляем код в нужное место на страницу веб-сайта

Получаем код для вставки видео

Для вставки кода, необходимо переключить редактор WordPress в режим Текст и в нужное место вставить скопированный код.

Вставляем код на страницу сайта

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

Дополнительные возможности кода

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

Дополнительные возможности для вставки видео

Из названия пунктов в принципе понятно какие параметры можно изменить:

  1. Изменить размер видео, выбрать стандартный из выпадающего меню, либо задать свой
  2. По окончанию видео можно разрешить/запретить выводить похожие ролики
  3. Убрать панель управления внизу видео — будут недоступны кнопки перемотки, ролик можно только поставить на паузу или продолжить
  4. Можно убрать название видео сверху ролика

Расширенные скрытые настройки

Включение автоматического воспроизведения.

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

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

Воспроизведение с нужного места

Добавив в код встраивания “#t=” и указав нужное время после знака равно, ролик начнет проигрываться с этого времени.

<iframe src="https://www.youtube-nocookie.com/embed/hQg_R9qMDYQ#t=2m30s" frameborder="0" allowfullscreen></iframe>

Коды плеера Ютуб:

  • &vq=hd720 — КАЧЕСТВО HD 
  • &autoplay=1 - Автовоспроизведение (пример выше)
  • &modestbranding=1 — скрыть лого Ютуба
  • &showinfo=0 — скрыть название и рейтинг
  • &controls=0 — скрыть полосу прокрутки

Скрипт Ютуб Профессионал

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

Скрипт Ютуб Профессионал

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

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

Вставить видео с YouTube в сайтбар

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

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

На этом я заканчиваю обзор как вставить видео с YouTube на сайт. Как видите ничего сложного в этом нет, справиться любой новичок. Я специально не стал рассматривать вставку видео на сайт с помощью плагинов, т.к. попробовав несколько вариантов решил для себя, что оптимально и правильно использовать код html.

С Уважением Дмитрий Леонов | leonov-do.ru

Рекомендую прочитать похожие статьи:

YouTube - инструмент для заработка в интернете

Простые способы как скачать видеоролик с YouTube

Новости блога Получай обновления первым!

Согласен (-на) с политикой конфиденциальности и обработки персональных данных

leonov-do.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Шаг четвёртый.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

zarabotokwmz.ru

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

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

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

И так, теперь о том, как вставить видео c Youtube на сайт.Если сказать коротко, то нужно просто код или url видео клипа скопировать к себе на сайт, на ту страницу, где вы хотите его разместить.Я объясню, как вставить видео на сайт, на примере одного ролика со своего канала на YouTube.

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

Открываете видео. Чтобы скопировать код ролика, нажимаете кнопку “Поделиться”, затем “HTML-код”.Скопируйте этот код полностью и вставьте его к себе на блог, туда, где вы хотите разместить видео ролик.Да, забыл уточнить, код вставляйте обязательно в текстовом режиме HTML-кода, а не в визуальном.

При вставке этого кода на блог WordPress, видео не отображается сразу, при предварительном просмотре страницы.Для просмотра видео, нужно нажать “Предварительный просмотр”, а затем при переходе на страницу просмотра, просто обновите ее.

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

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

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

Или добавьте в свой код  запись ?rel=0, сразу после названия ролика.На изображении участок кода, который нужно добавить подчеркнут.Так удобно сделать, если вы хотите изменить настройки своих видео роликов, которые уже установлены на сайт.Если включить режим повышенной конфиденциальности, то сервис YouTube не будет сохранять информацию о ваших посетителях, которые не смотрели видео.

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

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

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

Если ваш сайт не поддерживает новый код, который заключен в теги iframe, то установите галочку в пункте “Использовать старый код вставки”, этот код начинается с тега object.Разница между ними в том, что старый код поддерживает только технологию Flash, а новый и Flash и HTML5.

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

Как видите сложного тут нет ничего, и добавить видео с YouTube на сайт, может любой вебмастер.Кстати на YouTube можно смотреть видео в режиме ТВ или видео плеера, что делает просмотр еще удобней.Удачи!

С уважением Юрий Хрипачев.

uznaytut48.ru