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

Содержание:

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

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

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

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

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

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

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

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

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

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

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

Фреймы: вставка видео с YouTube

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

Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

  1. Откройте видео, которое хотите разместить.
  2. Под ним нажмите кнопку и щёлкните на вкладке .
  3. Скопируйте код из появившейся строки.
  4. Вставьте на страницу своего сайта. Куда вы добавите фрейм, там и появится видео.

Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

Размер видео. Из раскрывающегося списка выберите нужную ширину и высоту. Если подходящего варианта нет, то щёлкните на пункте Другой размер и задайте его в пикселях, введя значения в поля, появившиеся справа от списка.

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

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

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

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

Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Что это означает?

  • <iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
  • width — значение атрибута определяет ширину фрейма.
  • height — задаёт высоту.
  • src — содержит ссылку на видеоролик.
  • frameborder — устанавливает ширину рамок фрейма.
  • allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Мы получим:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

Простой способ встроить видео YouTube в WordPress

WordPress 2.9 добавил классную функцию, которую они называют встраиванием. Это позволяет вам копировать и вставлять видео YouTube прямо на ваш сайт без каких-либо дополнительных плагинов или необходимых настроек. Вот как это сделать:

Шаг 1

Скопируйте URL из видео YouTube. Вы можете скопировать URL-адрес из адресной строки вашего браузера или с помощью ссылки на ссылку YouTube.

Ссылка на YouTube

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

Шаг 2

Вставьте URL в редактор WordPress, и функция встраивания автоматически превратит его во встроенное видео.

Вставить видео YouTube в редакторе WordPress

Что ещё можно сделать

Включить режим повышенной конфиденциальности

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

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

Обратите внимание, что действие Условий использования YouTube API и Правил для разработчиков распространяется и на встроенный проигрыватель. Примечания

Примечания

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

Чтобы включить режим повышенной конфиденциальности, в коде HTML измените домен встроенного видео с https://www.youtube.com на https://www.youtube.com. Пример:

Оригинальный URL видео:
<iframe width=»1440″ height=»762″ 
src=»https://www.youtube.com/embed/7cjVj1ZyzyE»
frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>

Измененный URL видео:
<iframe width=»1440″ height=»762″ src=»https://www.youtube.com/embed/7cjVj1ZyzyE»
frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>

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

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

Чтобы видео воспроизводилось автоматически, вставьте в код фрагмент &autoplay=1. Он должен следовать за идентификатором ролика, который расположен после фрагмента embed/.

Автовоспроизведение не учитывается при подсчете просмотров видео.

Пример:

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

Чтобы видео воспроизводилось с определенного момента, вставьте в код фрагмент ?start= и после него укажите нужное время в секундах от начала ролика.

Например, чтобы ролик начал воспроизводиться на отметке 1 минута 30 секунд, код должен выглядеть следующим образом:

Добавить субтитры

Чтобы во встроенном видео автоматически появлялись субтитры, добавьте в код фрагмент &cc_load_policy=1.

Можно указать язык субтитров. Вот пример для русского: &cc_lang_pref=ru&cc_load_policy=1.

  • Язык субтитров задается параметром «cc_lang_pref».
  • Фрагмент «cc_load_policy=1» означает, что субтитры будут включены по умолчанию.
  • «ru» – код русского языка. Двузначные языковые коды приведены в стандарте ISO 639-1.

Запретить встраивание ролика
Можно запретить пользователям встраивать ваше видео. Вот как это сделать:

  1. Войдите в аккаунт и перейдите в Творческую студию YouTube.
  2. В меню слева нажмите Контент.
  3. Нажмите «Сведения» рядом с нужным видео.
  4. Откройте вкладку Другие параметры в верхней части страницы.
  5. В разделе «Дополнительные параметры» снимите флажок «Разрешить встраивание видео» и нажмите Сохранить.

Способ № 2. Как вставить видео в HTML при помощи плеера

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

Нужно скачать файлы указанного плеера на локальный компьютер.
Разархивировать их в конкретную папку на создаваемом сайте.
Открыть HTML-файл и подключить javascript-файл проигрывателя к подготовленному файлу. Для этого нужно прописать специальный код внутри тега HEAD

Важно: правильно указать путь к папке!

Нужно разместить плеер в HTML-файле. Здесь нужно правильно прописать путь к файлам

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

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

Как использовать audio и video в HTML5

Чтобы создать плеер, достаточно такого кода для аудио:

<audio controls>

<source src=»music.mp3″ type=»audio/mpeg»>

<source src=»music.ogg» type=»audio/ogg»>

</audio>

И такого — для видео:

<video src=»video.mp4″ poster=»poster.jpg» controls></video>

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

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

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

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

Вот список атрибутов, которые можно указать для плеера:

  • controls — панель управления;
  • autoplay — автовоспроизведение;
  • loop — цикличность;
  • muted — выключение звука;
  • poster — обложка видео. Если не указать, будет выбран случайный кадр;
  • preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
  • src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент <track>, который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

  • default — указывает на дорожку, которая используется по умолчанию;
  • kind — тип файла, можно указать следующие значения:
  • subtitles — субтитры (стоит по умолчанию),
  • captions — субтитры для глухонемых,
  • chapters — название глав и их временные рамки,
  • descriptions — звуковое описание происходящего для слепых,
  • metadata — метаданные;
  • label — название дорожки;
  • src — путь к файлу;
  • srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

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

Поэтому мы подключаем JS и пишем свой интерфейс.

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

autoplay — видео воспроизводится автоматически сразу после загрузки веб-страницы;controls — панель управления к видео плееру;height — высота видео плеера;width — ширина видео плеера;loop — повтор воспроизведение видео сначала после его завершения;src — путь к видео файлу;poster — адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
<title>ТЕГ VIDEO</title>
</head>
<body>
 <video src="bloggood-ru.mp4" width="400" height="300" controls="controls" poster="kartinka.png">
 Тег video не поддерживается вашим браузером.
 <a href="bloggood-ru.mp4">Скачайте видео</a>.
 </video>
</body>
</html>

Результат:

Вначале загружается картинка «kartinka.png».

Когда вы нажмете «плей», картинка исчезнет и заработает видео:

Если браузер не поддерживает тег <video>, вы увидите вот это:

Вот и все.
Если есть исправление, дополнение или вопросы по теме «как вставить флэш-ролики, видео и аудио файлы в HTML документ», пишите в комментарии, постараюсь ответить.

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

Популярные статьи:

  • Как узнать id компьютера
    Дата: 29 марта 2013
    Прокомментировано:90
    просмотров: 316186

  • Размеры форматов листов А0 – А7
    Дата: 23 января 2013
    Прокомментировано:3
    просмотров: 263355

  • Смешные логические загадки с подвохом, отгадки прилагаются
    Дата: 12 ноября 2014
    Прокомментировано:5
    просмотров: 189547

  • Установка windows 7 на ноутбук
    Дата: 18 декабря 2012
    Прокомментировано:169
    просмотров: 182485

  • Как включить или отключить Aero в Windows 7
    Дата: 1 июня 2013
    Прокомментировано:6
    просмотров: 155397

HTML5

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

Самый простой код вставки видео будет таким:

<video src="film.webm"></video>

Где film.webm — ссылка на воспроизводимый ролик.

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

<video controls>

<source src="videos/play.mp4" type="video/mp4">

<source src="videos/play.ogv" type="video/ogg">

<source src="videos/play.webm" type="video/webm">

</video>

video — контейнер, отображающий ролик.
source — тег, содержащий информацию о видео

Обратите внимание, что в примере код содержит ссылки аж на три ролика разных форматов. Дело в том, что пока разные браузеры поддерживают не все кодеки, и возможные проблемы с воспроизведением решаются кодированием одного и того же ролика с помощью разных кодеков и одновременным добавлением файлов в тег.
controls — включает панель воспроизведения.
src — задаёт путь к проигрываемому ролику.
type — указывает тип контента, на который ссылается атрибут src.
Есть и дополнительные, не попавшие в код, атрибуты, позволяющие настроить проигрывание.
width — определяет ширину области отображения.
height — задаёт высоту.
autoplay — воспроизводит ролик автоматически после загрузки страницы.
loop — зацикливает воспроизведение.
preload — загружает видео вместе со страницей.
poster — содержит адрес изображения, которое будет показываться вместо ролика, если он вдруг по каким-либо причинам не воспроизведётся.

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

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

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

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

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

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующую страницу:

Практическое задание № 27.

Подсказки:

  1. Чтобы получить значение цвета, который использует YouTube вы можете сделать PrintScreen экрана и в графическом редакторе, используя инструмент палитра (пипетка) получить значения цвета. Например, в Paint можно получить значение цвета в системе RGB. Как задавать цвета в системе RGB вы можете повторить в статье учебника «HTML Цвета». Кроме того, для этих целей существует множество плагинов для браузера.
  2. Укажите для боковой панели значение ширины равной 50% это позволит Вам получить два одинаковых блока с видео клипами и сделать наш пример адаптивным.
  3. Для выполнения задания Вам потребуются знания из статьи учебника «Теги разметки страницы».

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

Видео и аудио контент

Метаданные

Зачем вставлять видео в email рассылку

Видео становится популярнее как формат контента. Youtube на втором месте среди самых посещаемых сайтов в мире — правда, Facebook уже дышит ему в затылок, но и в этой соцсети выше всего ранжируются именно посты с видео.

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

Вот немного статистики:

  • 68% пользователей предпочтут узнать о свойствах продукта из короткого видео, а не из текста. Значит, даже короткая гифка с демонстрацией туфель сработает лучше, чем два абзаца текста или три фотографии.
  • Упоминание видео в теме письма может увеличить Open rate. Разные источники называют цифры от 6 до 19%.
  • Видео в письме поднимет CTR на 65%.

Вставка видео на сайт с помощью джава-скрипта

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

  1. Скопировать код вставки (с нужным размером видео) и разместить его на странице, типа этого:
    <iframe width="710" height="399" src="https://www.youtube.com/embed/NHgSn6U9m5g" frameborder="0" allowfullscreen></iframe>
  2. Снять скрин с ролика (использовать картинку, которую, например, плеер Ютуба подгружает себе по умолчанию, не получается, ибо на ней нет кнопки запуска — того самого треугольника посередине, который и позволяет отличить ролик от простого изображения). Получится примерно так (пока еще не кликабельно — просто картинка):
  3. Из кода вставляемого видеоролика я беру идентификатор (в моем примере это NHgSn6U9m5g) и переношу его в такую вот конструкцию (в какое место и так несложно догадаться):
    <div class="img_center1" onclick="$(this).replaceWith('<iframe width=\'100%\' height=\'400\' src=\'https://www.youtube.com/embed/NHgSn6U9m5g?autoplay=1&amp;rel=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');"><img alt="" src="https://ktonanovenkogo.ru/wp-content/uploads/video/image/chto-takoe-bitkoin.jpg" /></div>
  4. Туда же я добавляю путь до скрина, который сделал чуть ранее и залил на свой сервер (вставляю, естественно, в тег IMG). Класс img_center1 можете убрать, ибо это просто мой способ оформления картинок на сайте.

Как вставить видео с 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 на блог на любом сервисе.

Что выбрать, чтобы встроить YouTube в WordPress?

При попытке выяснить, как встроить YouTube в WordPress, становится ясно, что многие из этих плагинов очень похожи. Мы разбили каждый плагин по лучшим функциям от каждого, но он все еще может показаться немного запутанным. Ниже у нас есть наши лучшие рекомендации, основанные на ваших конкретных ситуациях. Таким образом, вы можете выбрать два или три из них и протестировать их на своем веб-сайте. Я обнаружил, что плагины видеогалереи требуют тестирования, потому что некоторым людям нравятся некоторые макеты лучше, чем другие. Также вы можете обнаружить, что один плагин плохо работает с вашей темой или другими плагинами.

  • Для лучшего встраиваемого плагина YouTube – Go with YouTube от EmbedPlus.
  • Чтобы лениво загружать все ваши встроенные видео на YouTube – рассмотрите WP YouTube Lyte.
  • Создать красивую галерею для ваших видео – Подумайте о Видеогалерее – YouTube Gallery
  • Для получения видео из социальных сетей (и для включения кнопок социальных сетей в видео) – попробуйте Feed Them Social.
  • Если вы хотите разнообразить компоновку галерей – плагин YotuWP – достойный выбор.
  • Для тех, кто только начинает видео-сайт и хочет получить полную галерею YouTube, тема Videozoom поможет вам выбрать правильный путь.
  • Если вы предпочитаете WYSIWYG-редактор вместо коротких кодов – рассмотрите ARVE Advanced Responsive Video Embedder.
  • Для чрезвычайно простого инструмента встраивания YouTube – подумайте о WpDevArt YouTube Embed, Playlist и Popup.
  • Чтобы вытащить весь канал YouTube и отобразить его так, как он показывает на YouTube – перейдите с YourChannel.
  • Если вы хотите опробовать другой плагин галереи – плагин YouTube Gallery создает отличные галереи.

Дополнительные атрибуты

Атрибут Значение Описание
autoplay autoplay Указывает, что воспроизведение видео начнется сразу после его готовности
controls controls Указывает, что элементы управления видео должны отображаться (например, кнопка воспроизведения/паузы и т.д.).
height pixels Устанавливает высоту видео проигрывателя
loop loop Указывает, что видео будет начинаться снова, каждый раз, когда он закончится
muted muted Указывает, что аудиовыход видео должен быть отключен
poster URL Указывает изображение, которое будет отображаться во время загрузки видео, или до тех пор, пока пользователь не достигнет кнопки воспроизведения
preload auto
metadata
none
Указывает, если и как автор считает, что видео должно быть загружено при загрузке страницы
src URL Указывает URL-адрес видео-файла
width pixels Устанавливает ширину видео проигрывателя

Стили видеоплеера

Сохраните файл html и откройте новый файл с именем «video-player.css». Не забудьте сохранить файл css в той же папке, где html.

Теперь вернитесь в файл html и добавьте в тег <head> атрибуты, которые свяжут файл html с css-файлом: <link rel = «stylesheet» type = «text / CSS» href = «video -player.css»>.

Независимо от структуры, которую вы хотите использовать в файле css, просто указываете элемент с id, который отметили в html-файле, указав в начале #. Так вы сообщите редактору кода, какую часть необходимо стилизовать первой:

cssCSS

Я последовательно настроил все элементы создаваемого плеера в файле css.

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

У видеоплеера синий фон, он ограничен размерами дисплея плеера, так как функция display имеет значение inline-block. Поэтому веб-страница не станет полностью синей, так как синий фон будет ограничен размерами видеоплеера.

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

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

Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды «display: inline-block» и центрируется атрибутом «vertical-align: middle».

Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.

Добавить комментарий

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

Adblock
detector