Toderelt.ru

ПК Журнал ТодерельТ
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

  1. В YouTube на компьютере, перейдите к странице видео, которое вы хотите разместить на своем сайте.
  2. Под видео нажмите Поделиться .
  3. Затем нажмите Встроить .

Получение кода для размещения видео YouTube на сайте

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

Ручное изменение html-кода для вставки части видео с YouTube на сайт

Не смотря на то, что существует два варианта вставки: с использованием iframe и с использованием тега object. Необходимо изменять одни и те же параметры «start» и «end». Так, что не удивляйтесь, что действия очень похожи.

Параметр «start» задает время начало видео в секундах. Параметр «end» задает время остановки видео.

Вставка с использованием iframe

Откройте любой редактор html или редактор исходного кода. Рассчитайте в секундах время начала и время окончания видео, и добавьте параметры «start» и «end» так, как показано на рисунке:

Как вставить только часть (кусок) видео с YouTube?

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

Примечание: Символ «?» нужен для корректного составления Url.

Вставка с использованием тега object

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

Как вставить только часть (кусок) видео с YouTube?

В данном случае символ «?» не требуется, так как в ссылках уже есть параметры.

Вставка видео в WordPress и не только

Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.

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

Чтобы вставить видео на сайт WordPress:

  1. Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
  2. Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
  3. В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.

Читать еще:  Сброс настроек Google Chrome для стабильной работы

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

  1. Зайти в текстовый редактор в режим HTML.
  2. Скопировать код из ютуба в область контента.
  3. Сохранить страницу/запись в том же HTML режиме.

Dставка видео в WordPress в HTML режиме

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

Специальные плагины для вставки видео

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

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

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

Ряд CMS содержат специальные плагины, существенно упрощающие задачу по тому, как вставить любое видео с Ютуба на сайт. Например, есть AllVideos или Vidbox. С ними можно вставить собственное видео без ссылки, контент из соцсетей или с какого-нибудь хостинга. Дистрибутивы ПО получают с сайтов разработчиков, потом устанавливают и активируют его. Плагины следует настраивать: уточняют шаблон, параметры картинки, директорию для хранения клипов и прочее. Если фильм получают с другого ресурса, то каждый ролик получает собственный идентификатор. Шифр можно увидеть в адресной строке при просмотре.

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

Iframe-видео (YouTube, Vimeo и т.д.)

Наш маленький трюк описанный выше не поможет нам при работе с видео, которое добавлено через iframe. Принудительное увеличение ширины до 100% эффективно, но когда мы устанавливаем height: auto;, мы получаем статическую высоту 150px, которая слишком приземистая для большинства видео. Практически все браузеры будут отображать теги iframe, canvas, embed и object как 300px × 150px, если не указано иное. Даже если этого нет в пользовательской таблице стилей.

Читать еще:  Не работает Facebook

К счастью, здесь есть несколько возможных решений. Один из них был впервые предложен Тьерри Кобленцем и представлен в A List Apart в 2009 году: Создание внутренних соотношений для видео. Используя эту технику, вы оборачиваете видео в другой элемент с внутренним соотношением сторон, а затем размещаете видео в этом абсолютном положении. Это дает нам резиновую ширину с “умной” высотой.

Существует еще один “хитрый” вариант”, который позволяет регулировать соотношение сторон прямо из HTML:

Иногда можно встретить олдскульный вариант встраивания видео в котором используется теги object и embed, так что если вы стараетесь поддерживать все возможные варианты — добавьте для них обертку:

Видеоинструкция

технологии oEmbed и приведён список сайтов, с которых можно вставить мультимедийный контент в ваш сайт.

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

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

Вставляем YouTube через oEmbed

Вы не успеете заметить, как эта ссылка автоматически трансформируется в видео. Эта возможность появилась давно, но именно в режиме предпросмотра видео — в последнем обновлении WordPress. Я считаю это просто супер! 🙂

Ссылка преобразовалась в проигрыватель

Ссылка преобразовалась в проигрыватель

Единственное неудобство здесь в том, что вы не сможете задать размер видео и оно каждый раз будет разного размера. Вероятнее всего это будет зависеть от максимально возможного размера самого видео, а может от чего-то другого. Честно скажу — не знаю. Но те видео, которые я готовлю в 720p и в 1080p, без исключений растягиваются по всей ширине страницы.

Читать еще:  Как Вконтакте изменить семейное положение?

Как обойти ситуацию с размером видео и задать максимальный

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

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

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

Вернёмся к нашему коду. Например, я хочу для всё того же видео про сервис TemplateMonster указать максимальную ширину в 600 пикселей. В этом случае мне нужно будет указать через пробел параметр width=»600″, например, так:
alt=»Использование тега embed» width=»600″ height=»31″ />

Результат на сайте будет следующим (специально вставляю в снимок экрана дополнительный текст, чтобы вы увидели разницу при указании ширины видео):

Использование тега embed

Использование тега embed

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

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

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

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector