Smeecy Smeecy: Расскажите о своих желаниях гуглу, может они для вас сделают исключение.
Вот так вот: prntscr.com/ekb5pr
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Дмитрий Гординский @SiriusZloy
В тег
То есть вам нужно сперва узнать по какому пути находится нужный вам видеоролик. Находился бы он на вашем сервере, проблем бы это не вызвало, но Youtube, как я думаю, такую информацию вам не даст, хотя бы для того чтоб видео вы вставляли вместе с его плеером.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
JavaScript
+1 ещё
Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?
1 подписчик
2 часа назад
21 просмотр
Вставка видео на сайт с Youtube и не только
В недавней заметке о том как правильно написать статью для блога я упоминал, что желательно добавлять в контент графические материалы и видеоролики. Они улучшают читаемость текста + дополняют его легкой по восприятию информацией. В обучающих публикациях это, например, может быть визуальная демонстрация того или иного вопроса, описанного в заметке. Часто подобные материалы встречаются в развлекательных веб-проектах. Да и вообще видеоконтент в наше время становится весьма популярным.
Именно поэтому сегодня я хочу рассмотреть несколько нюансов по вставке видео на сайт с Youtube и похожих сервисов. Часть инфы в начале пригодится новичкам, а в конце текста найдете один прием для верстки. Разделы статьи:
Общий принцип внедрения видео из Ютуб.
Вариант в WordPress.
Как вставить адаптивное видео (+ сниппет для автоматизации процесса).
Размещение видео из Facebook (линк на другую статью блога).
Вставка видео с Youtube
Начнем с самого глобального и универсального метода. Практически в каждом видеохостинге рядом с роликом должна быть форма, позволяющая поделиться им с другими пользователями. В ютубе она выглядит следующим образом:
На этой странице вы можете:
Определиться с методом распространения ролика: социальные сети, добавить видео на веб-страницу в HTML формате (что нам и нужно) либо отправить его по почте.
При клике на второй пункт увидите специальный HTML код для вставки видео на сайте.
На третьем шаге выбираете размер — есть парочка форматов по умолчанию (640х360, 560х315 и т.п.), но также разрешается задавать и свои значения.
По желанию включаете доп.параметры: показ названия, панели управления и похожих видео.
То есть все, что вам нужно сделать, это скопировать код соответствующего ролика и добавить его в требуемое место.
Если у вас в проекте имеется определенная админка, то используйте ее встроенный текстовый редактор. В противном случае придется редактировать непосредственно HTML страницу (через Notepad++ или Sublime Text и т.п). Реализацию первого варианта можете посмотреть ниже на примере с Вордпресс.
Пару слов о теге Iframe, который применяется чтобы вставить видео на сайт в HTML с Ютуба. Здесь есть следующие параметры:
width — ширина блока;
height — высота;
src — ссылка на Youtube видео;
frameborder — отображение рамки/границы у фрейма;
allowfullscreen — поддержка полноэкранного режима.
В принципе, вникать особо в эти опции не нужно, привел их скорее для общего развития. Вам лишь требуется скопировать готовый код, а размер элемента легко выбирается через форму на странице ютуба.
Вставка видео в WordPress и не только
Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.
Помнится, раньше для решения задачи даже были какие-то специальные wp плагины, но сейчас все гораздо проще, я бы сказал элементарно.
Чтобы вставить видео на сайт WordPress:
Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).
Интересно, что в последних версиях CMS данный прием работает в обеих режимах редактора. В «Визуальном» вы можете сразу увидеть преобразование, а в HTML подмена линка на видео будет видна при сохранении и просмотре опубликованной записи.
Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:
Зайти в текстовый редактор в режим HTML.
Скопировать код из ютуба в область контента.
Сохранить страницу/запись в том же HTML режиме.
Иногда такой подход удобнее, если надо подправить некоторые параметры тега, например, размер плеера. Кроме всего прочего лично я добавляю абзацу с роликом выравнивание по центру.
Адаптивное видео c Youtube
Когда на страницу вы добавляете код плеера с конкретными размерами ширины и высоты, то при просмотре сайта на меньших разрешениях экрана это может вызвать некоторые проблемы. Если у вас хороший адаптивный шаблон, то скорее всего, там все это уже учтено, в противном случае придется внедрить один хак.
Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:
add_filter(‘the_content’, ‘filter_iframe’); function filter_iframe($html)< $html = preg_replace('/
‘, $html); return $html; >
Код проверял, все работает. Данных трех примеров как вставить видео с Youtube на сайт вам должно хватить с головой. Будут какие-то вопросы — пишите в комментариях. Возможно, позже дополню пост, если найду новую инфу.
Как вставить видео с Facebook на сайт (2 способа)
Советы по оптимизации скорости загрузки сайтов на wordpress и не только
Monstroid 2 — универсальный шаблон для WordPress (этапы развития и функции)
Новый шаблон страниц и записей в WordPress — создание, выбор, важные нюансы
7 Comments
Seoonly.ru 03.06.2017 at 11:05 Только плагины только хардкор!
Tod 03.06.2017 at 12:25 Seoonly, уже не актуально) хотя, уверен, некоторые новички так все еще делают.
Тома 06.08.2017 at 21:26 По описанию все достаточно просто, но зачем тогда в Вордпресс столько всяких модулей для работы с видео?
Tod 06.08.2017 at 21:34 Тома, изначально в WordPress не было многих функций, в том числе и вставка видео на сайте осуществлялась через HTML код или сторонние модули. Сейчас, как видите по гифке, все стало значительно проще. Советую копировать и вставлять код с Youtube — так надежнее всего.
Tim 16.05.2018 at 08:19 Спасибо, очень дельно! Правда почему то страничка материала стала тяжко подгружаться, но не думаю что проблема в этом коде. Tod , не актуально использовать плагины или код?
Tod 16.05.2018 at 11:42 Tim, плагины для вставки Yuotube точно не актуальны, а код можно использовать — я лично добавляю через него, т.к. иногда выбираю размеры экрана.
Владимир 03.08.2018 at 11:41 Спасибо, очень давно искал решение для адаптивного дизайна.
Добавить комментарий
Tod’s Blog создан для тех, кто хочет научиться зарабатывать в сети и активно интересуется темой монетизации сайтов.
Основные категории блога: партнерки, контекст, биржи ссылок, CPA, веб-разработка и создание сайтов, фриланс, SEO и SMO продвижение, блоггинг и т.п. Информация пригодятся как полным новичкам, так и тем, кто неплохо разбирается в теме онлайн заработка.
Collaborator — биржа прямой рекламы (ссылки/статьи)
Freelancehunt — лучшая биржа фриланса
Как вставить видео с Ютуба на сайт
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Иногда словами не получается объяснить суть темы, поэтому люди начинают жестикулировать, приводить наглядные примеры и т.п. Поэтому и в интернете для раскрытия темы часто необходимо использовать визуальные средства. На помощь приходит всем известный видео-хостинг, на котором размещаются бесплатные видео-ролики.
Дополнительные преимущества вставки видео с Youtube на сайт
Получение дохода от показа ролика, если он принадлежит владельцу интернет-сайта.
Увеличение популярности веб-ресурса.
Пополнение медиа-контентом.
Демонстрация портфолио.
Но отсылать посетителя со своего сайта на видео-хостинг неудобно, так как не хочется его терять. Кроме того, каждая лишняя исходящая ссылка “переливает” вес с вашего сайта. А зачем это нужно?
Рассмотрим инструменты, при помощи которых можно разместить видео с Ютуба на сторонний сайт.
Вставка html-кода фрейма.
Это самый простой способ ретрансляции видео. HTML-код находится на странице видеоролика в Youtube. Нажимаем “Поделиться”.
В поле снизу появляется прямая ссылка на ролик. Но мы выбираем “Встроить” — <> и получаем код видео с Youtube для сайта.
Устанавливаем настройки и копируем его в буфер.
Затем заходим в систему администрирования нашего сайта (предположим, что это MODx). Открываем исходный код той веб-страницы сайта, на которую следует вставить видео с Youtube и размещаем его.
Нажимаем “сохранить” и проверяем.
Фрейм — это такой виртуальный контейнер, который отображает в себе содержимое другой веб-страницы. В его коде можно поправить атрибуты вручную.
width и height – его размеры;
src – путь;
frameborder – рамка есть или нет;
allowfullscreen – полноэкранный вид.
2. Вставка html-кода video
Он отображает видеоролики на веб-странице. Его синтаксис:
width и height – его размеры;
src – путь, который может задаваться через вложенный ;
autoplay — самопроизвольно включается в момент загрузки веб-страницы;
controls — ролик отражается вместе с панелью управления;
loop — зацикливает повтор;
poster — показывает посетителю картинку, если с его отображением возникают проблемы — следует указать путь к изображению-загрушке;
preload — видео загружается одновременно со страницей;
frameborder – рамка есть или нет;
allowfullscreen – полноэкранный вид.
URL самого видео, как мы говорили ранее, находится на его странице. Он копируется в буфер обмена и вставляется на веб-страницу в ее код в нужном месте. Результат получается тот же.
Тег можно вставить несколько раз в , ссылаясь на ролики в разных форматах. Пользователь сможет выбрать удобный для просмотра вариант самостоятельно.
3. Видеоплееры на основе JavaScript и Flash. Только программист сможет внедрить такое приложение к движку. Самым оптимальным и простым из них считается Spruto. На его официальном интернет-проекте можно настроить функционал и внешний вид.
Размещаем URL, делаем настройки и получаем код.
Можно скачать плеер полностью для установки или только код в формате JS или FLASH. В комплект скрипта входит руководство по установке.
4. Спецсредства в движках (CMS).
Во многих CMS предусмотрены встроенные плагины, которые позволяют работать с видеороликами.
WordPress
В последних версиях можно вставить простую ссылку на Ютуб напрямую. В режиме Html (Text) просто вставляется в нужном месте ссылка на странице и сохраняется. При этом происходит полноценное отображение ролика на сайте. Указатель ?autoplay=1 позволит ролику включаться автоматически при открытии страницы пользователем.
Плагины
Многие CMS работают только с плагинами, Например Joomla доступны а AllVideos или Vidbox. Рассмотрим первый из них.
После скачивания необходимо стандартным способом установить плагин и активировать его. Затем настраиваем: выбираем шаблон, размер плеера, папку для хранения файлов и т.д. Для каждого видео в Ютубе генерируется уникальный идентификатор, его можно найти в адресной строке в момент просмотра.
Копируем его, затем в нужно месте страницы в Джумла вставляем код типа
На этом все! Вы можете использовать один из методов, чтобы дополнить содержимое вашего сайта.
Как разместить видео на сайте
От автора: приветствую всех читателей webformyself. В прошлой статье мы рассматривали установку счетчика, а сегодня я вам покажу, как разместить видео на сайте двумя способами и какие у каждого особенности.
Вставка видео на сайт
Мы с вами живем в период, когда на веб-странице помимо текста и изображений могут присутствовать и другие элементы. В частности, видео. Хорошо сделанный ролик по теме увеличит ранг страницы и позволит пользователям дольше оставаться на вашем сайте. В общем, это достаточно полезный ход.
Как я уже и говорил в начале, существует два способа вставки, которые сегодня можно использовать:
С помощью тега video, который появился в html5
С помощью скриптов
Как разместить видео с Youtube на сайте?
Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:
Давайте вы нем немного разберемся, чтобы понимать, как он работает. Атрибуты width и height указывают ширину и высоту нашего контейнера, вы можете выставить их по дизайну вашего сайта. Пустой атрибут allowfullscreen разрешает расширять содержимое на весь экран, пользователи часто это делают и не нужно им запрещать это.
Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. //www.youtube.com/embed/уникальный id видео.
Таким образом, вам достаточно знать адрес конкретного ролика и можно его самостоятельно скопировать и вписать в код.
В данном случае id видео это то, что идет после watch?v=.
Итак, с этим способом все понятно, никаких проблем у вас возникнуть не должно. Но если вы ставите не свое видео, то со временем оно может быть удалено или перемещено и на вашем сайте будет указано, что оно недоступно. Именно по этой причине лучше ставить свои видеоролики.
Вставка через html код
Наверняка многие из вас знают, что появилась новая версия языка разметки — html5, и она принесла с собой пару новых тегов и возможностей. Кстати, подробно об этом вы можете посмотреть в нашем курсе по этой технологии.
Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:
