Как вставить видео?

Урок 15. Как вставить видео на страницу сайта средствами HTML?

1. Как вставить видео на сайт средствами HTML?
2.

Короткий код вставки видео с Youtube на сайт Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.

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

1. Зарегистрироваться на видеосервисе (Например: Youtube, Yandex video, Rutube)

2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:

Код HTML

  
Демонстрация Скачать исходники

Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.

ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут.

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

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

Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer (скачать FlowPlayer). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:

Код HTML

Останется только на самой стране вставить код для проигрывания видео. В href не забудьте вставить путь к видео.Из плюсов данного метода хотел бы отметить отсутствие рекламы при проигрывании видео и, при нормальной работающем хостинге(!), быструю загрузку видео.

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

В коде будет менять только http://www.youtube.com/embed/WRtAVxqacQM короткий идентификационный код для видео. Также по желанию можно изменить размеры окна видео: width (ширина в пикселях), height (высота в пикселях).

Код HTML (вставляем куда угодно в body документа)

И наслаждаемся клипом LP!)

Демонстрация Скачать исходники

Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице. Синтаксис
Атрибуты тега video autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы. controls — Добавляет панель управления к видеоролику. height — Задает высоту области для воспроизведения видеоролика.

loop — Повторяет воспроизведение видео с начала после его завершения. poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится. preload — Используется для загрузки видео вместе с загрузкой веб-страницы. src — Указывает путь к воспроизводимому видеоролику.

width — Задает ширину области для воспроизведения видеоролика. Пример кода тега video
Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы. К слову, спецификация HTML 4.0 рекомендует использовать тег object для загрузки внешних данных вместо тега embed.

Однако некоторые браузеры не отображают таким образом нужную информацию, поэтому наилучшим вариантом будет поместить embed внутрь контейнера object.

Используемые атрибуты тега embed

align — определяет как объект будет выравниваться на странице и способ его обтекания текстом height — высота объекта hidden — указывает, скрыть объект на странице или нет hspace — горизонтальный отступ от объекта до окружающего контента pluginspage Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру src — как и везде — это путь к файлу type — MIME-тип объекта vspace — вертикальный отступ от объекта до окружающего контента. width — ширина объекта

Спасибо за внимание! И успехов при вставке видео на сайт!)

Источник: http://tradebenefit.ru/art?id=118

Все способы, как можно вставить видео с Youtube на сайт

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

Зачем сайту видео?

Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с Youtube на своем сайте.

Что это дает:

  • Дополнительный источник дохода – за показ видеороликов владелец сайта получает деньги;
  • Дополнение к материалу – часто видео данные выступают дополнением к текстовому контенту. Это делает изложение информации более полным и исчерпывающим. Особенно эффективно использование такого дополнения во время обучающего процесса;
  • С помощью видео можно более наглядно показать, как все должно происходить на практике

  • Как способ привлечения посетителей – можно вставить видео на сайт, чтобы увеличить популярность ресурса. Но для этого нужно использовать уникальные ролики, и лучше те, которых нет на популярных видео хостингах. Например, если вы являетесь автором какого-нибудь курса. И чтобы увеличить посещаемость своего сайта, бесплатно выкладываете на нем некоторые из уроков для просмотра;
  • В форме портфолио – подразумевается использование пространства ресурса для демонстрации своих возможностей как высококлассного специалиста в какой-либо сфере. Это могут быть видеоролики, в процессе съемки которых автор выступал режиссером и оператором. Или отснятая обстановка помещения, дизайн которой разрабатывался вами.

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

Способы размещения видео на сайте

Здесь мы рассмотрим наиболее популярные способы. Вот они:

  1. Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:

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

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

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

  • width – задается длина окна фрейма;
  • height – устанавливается высота окна плавающего фрейма;
  • src – путь к файлу, содержимое которого будет воспроизводиться;
  • frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);
  • allowfullscreen – разрешение на полноэкранное отображение видео.

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

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

А вот как отображается видео в плеере на странице нашего шаблона:

  1. Использование тега — позволяет размещать, воспроизводить и проигрывать видео на веб-странице. Его атрибуты:
  • autoplay – воспроизведение видео начинается сразу после загрузки страницы сайта;
  • controls – к ролику добавляется панель управления проигрывателем;
  • width, height – отвечают за размеры окна видеоплеера;
  • loop – включает автоматическое повторение воспроизведения видео сразу после его окончания;
  • poster – устанавливает картинку, которая будет отображаться, пока идет загрузка видео. Или если его воспроизведение недоступно;
  • preload – включает предварительную загрузку видео во время загрузки браузером веб-страницы;
  • src – задает путь к видеоролику.

Пример реализации:

Как видно из примера, в тегах реализовано несколько вариантов источников. То есть перед тем, как вставить видео на сайт, его нужно будет «перегнать» в несколько форматов. В зависимости от поддерживаемого формата браузер сам выберет нужный ему вариант.

Более детально о поддерживаемых различными браузерами форматах видео можно узнать из технической документации к языку html.

Вот как это выглядит на нашем сайте:

  1. Использование видеоплееров на основе JavaScript и Flash – самый трудный для реализации вариант. «Вживления» кода таких плееров в ваш сайт требует специальных знаний и навыков. Наиболее оптимальным является бесплатный видеоплеер Spruto. На официальном сайте с помощью конструктора можно настроить его внешний вид и функционал приложения:.

Затем нужно скачать его в виде архива или скрипта. При этом в комплект архива входит подробная документация для настройки и «безболезненной» интеграции видеоплеера на ваш ресурс:

Интеграция видео на сайтах, развернутых на основе CMS

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

Ссылка на видео с YouTube

Порядок действий:

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

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

Вот некоторые из них:

  • JW Player;
  • Video.js;
  • Spider Video Player.

2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.

Вот несколько проверенных:

  • AllVideos;
  • Vidbox;
  • AllVideos Reloaded.

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

Источник: http://www.internet-technologies.ru/articles/vse-sposoby-kak-mozhno-vstavit-video-s-youtube-na-sayt.html

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

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

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

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

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

Через фреймы

С помощью тега video, который появился в html5

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

С помощью скриптов

Как разместить видео с Youtube на сайте?

Это очень просто. Идете на ютуб и находите там тот ролик, которое вам нужно вставить к себе на страницу. Под ним есть пару кнопок. В частности, кнопка “Поделиться”. Здесь выбираем пункт html-код и ютуб покажет нам код, который надо вставить у себя в статье, чтобы видео вывелось в ней. Код имеет такое строение:

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

Читайте также:  Весёлые спортивные упражнения для детей 7-9 лет

Frameborder – это рамка фрейма, но она нам ни к чему. Вы можете задать ее самостоятельно через css. Наконец, самый важный параметр – src. Он указывает путь к видео на youtube. https://www.youtube.com/embed/уникальный id видео.

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

В данном случае id видео это то, что идет после watch?v=.

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

Вставка через html код

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

Так вот, там появился также тег video и он позволяет вставить видеоролик на сайт без каких-либо скриптов, а также воспроизвести его через встроенный плеер. Это делается вот таким кодом:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Одинарные теги source показывает браузеру путь к файлам и их MIME-тип для правильной интерпретации. Как видите, для работы во всех браузерах нам понадобится один и тот же файл в трех форматах. Сконвертировать можете в любом толковом конвертере или в онлайн-сервисе. Например, online-convert.com.

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

Другие способы вставки

Однако кроме этих вариантов есть и другие. Например, вы можете скачать скрипт, который будет выводить плеер. Один из самых популярных – FlowPlayer. Его нужно скачать, распаковать на ваш сайт, прописать путь к скрипту в html-файле и вставить само видео с помощью функции. Руководство по использованию плеера можно найти в документации к нему.

Пример вставки видео через flowplayer. Первым делом нужно подключить скрипт в head:

Далее в body там, где нужно вывести ролик, нужно написать примерно следующее:

    flowplayer(«player», {src : «http://url_вашего_ресурса/flowplayer/flowplayer-3.2.2.swf», wmode: «transparent»});

Для работоспособности всего этого дела:

Укажите правильные пути к файлам

Обратитесь к ссылке с id = “js-player”, в которую вставлено наше видео, и напишите ей пару css-стилей. Например, сделайте ее блочной для корректного отображения и добавьте оформление, если это необходимо. Самое главное, задайте высоту и ширину.

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

Тег object во многом похож на video, ведь в нем тоже используются одинарные теги, а именно param. В них прописываются различные настройки. Другой тег, с помощью которого можно вставить медиафайлы – embed.

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

Width и height – тут все понятно, это размеры;

Src –путь к видео, которое нужно отобразить ;

Type — MIME-тип содержимого;

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Источник: https://webformyself.com/kak-razmestit-video-na-sajte/

Как вставить видео в материал Joomla

Рассмотрим варианты вставки видео на сайт Joomla.

Каждый вариант имеет свои преимущества.

Рассмотрим варианты вставки видео на сайт Joomla.

Каждый вариант имеет свои преимущества.

Вставка видео из Youtube

Вариант по-старинке — это вставка видео из Youtube прямо в материал или модуль Joomla.

Для этого нужно сделать следующее:

  1. Первым делом нужно разрешить использование тега iframe, чтобы он не обрезался редактором.Переходим в Менеджер расширений — Плагины. Можете сразу отфильтровать их по типу «editors».И находим среди них плагин «Редатор — TinyMCE».Если у вас новая версия Joomla (3.7+), то в настройках редактора будут предустановленные настройки (сеты) для разных групп пользователей.Нам нужен Set 0 (для админов). Выбираем его и спускаемся ниже.Находим опцию «Use Joomla Text Filter» (использовать фильтр для текста) и включаем её.Тег iframe из списка запрещённых можно не удалять.И сохраняем.
  2. Далее переходим в Система — Общие настройки. Вкладка «Text Filters».

    Здесь для группы «Супер-пользователи» (или для той которая вам нужна), выбираем No Filtering, т.е. без фильтрации.

    Сохраняем.

  3. Переходим в сервис Youtube.com на страницу видео, которое вы хотите разместить на сайте.
    Под видео будет кнопка Поделиться. Жмём её и выбираем HTML код. В поле ниже появиться код для вставки этого видео.

     Копируем его Ctrl+C (или просто правой кнопкой мыши — Скопировать)

  4. Открываем материал Joomla, переходим в режим HTML (исходный код, это кнопка со значком )
    и в нужном месте статьи вставляем скопированный код.

    В редакторе вы сразу увидите блок с видеороликом.

    Сохраняем.

После этого на странице материала появиться видеоролик из Youtube.

Вставка из Youtube (вариант по-проще)

Делаем всё также как в первом варианте: пункты 1 и 2. Разрешаем использование iframe.

Далее копируем не HTML код видео плеера, а просто ссылку на видео.

Далее переходим в материал Joomla, ставим курсор мыши в нужное место статьи и жмём на кнопку «Видео»

Появиться вот такое окно, где в поле «Источник» вставляем скопированную ссылку из Ютуб.

Размер подставляется автоматически.

Таким же образом, на вкладке «Код для вставки»можно вставить и код видеоплеера в теге iframe. Чтобы не переходить в исходный код статьи. 

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

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

Привык)

Вставка роликов с других видеосервисов

Таким же образом вставляются видео из других видео хостингов, например Vimeo.com
Суть та же. Копируете код для вставки и вставляете его в статью или модуль Joomla.

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

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

Это вариант когда видео хранится прямо на вашем сайте, в виде файла .mp4 или в другом формате.

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

Вариант 1. Напрямую.

Допустим, вы загрузили ваш файл с видео в папку images и называется он — video.mp4

Можно вставить его вручную, используя тег video

К нему можно добавлять различные опции, которые доступны в HTML5

Или же можно вставить проще, через кнопку «Видео».

В поле источник указав путь до видеофайла, например: images/video.mp4
И при необходимости можно указать размеры ролика.

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

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

Но недостатков больше.

  1. Увеличивается нагрузка на ваш хостинг и на интернет-канал хостинга. Особенно это заметно когда видео просматривают сразу несколько десятков пользователей.Например, если ваше видео будут одновременно просматривать 20 человек, то вся ширина канала хостинга будет поделена между ними.

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

  2. Некоторые браузеры могут поддерживать не все форматы видео. 
  3. Если у вас много видео, то они будут занимать большой объём на хостинге.
  4. При вставке видео в статью, нужно каждый раз указывать путь до него, это не совсем удобно.

Вариант 2. Через плагин AllVideos.

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

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

{mp4}myvideo{/mp4}

Где myvideo — это название ролика в формате mp4.

Таким же образом можно вставлять и аудиоролики.

Преимущества вставки видео через плагин:

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

Недостатки почти такие же:

  • замедление загрузки сайта и самого видео при большой посещаемости
  • на сайте занимается большой объём места под видео
  • дополнительное стороннее расширение с подгрузкой своих яваскриптов.

Вставка видео с Youtube через плагин

Также при помощи плагина AllVideos можно вставлять ролики из Youtybe и многих других сервисов.

Делается это при помощи такой записи:

{youtube}xhty9934wk{/youtube}

Где xhty9934wk — это короткая ссылка на ролик из YouTube

Итог

Какой способ выбрать, решайте исходя из задач перед вашим проектом.

Если нужна быстрая скорость загрузки и не хочется тратить место на хоcтинге — то однозначно Youtube или подобные сервисы.

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

Желаю вам удачи!

Источник: https://JoomlaTown.net/blog/web-razrabotka/kak-vstavit-video-v-material-joomla

8 способов хитро вставить видео с ютуб (YouTube)

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

1. Отключение нижней панели плеера

Все вы знаете как выглядит стандартный плеер ютуб.

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

Этот вариант вставки видео полезен для страниц продажников. Я просто подобрал популярный мультфильм.

Doctorsmm — один из самых дешёвых сервисов по накрутке просмотров на YouTube. 1000 просмотров на видео здесь можно заказать за 60-80 рублей.

Для отключения нижней панели видеоплеера, нужно в скопированный html код видеоролика добавить параметр «control=0», и перед ним вставить знак вопроса.

Вот пример вставки кода:

И вот результат работы параметра controls=0 (отключить можно только нажав на паузу кликом по плееру):

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

Если вы не хотите демонстрировать видео полностью, а только показать его с определенного момента, сделайте это с помощью параметра start=8.

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

Вот пример кода:

А вот видео, которое начинается с восьмой секунды:

3. Отключение ссылок-скринов после просмотра видео

Обычно после просмотра видеоролика, появляются ссылки-скрины на похожее видео, отключить это можно при помощи параметра rel=0, опять же не забываем про знак вопроса.

Пример вставки кода с ютуб (YouTube):

4. Изменение палитры видеоплеера

Благодаря параметру theme=light&color=red можно настроить цвет плеера и ползунок под дизайн блога.

Пример вставки кода с ютуб:

Результат:

5. Скрытие название видео и рейтинг автоматически

Скрыть название видео можно путем добавления параметра showinfo=0.

Пример кода:

Результат добавленного видео с ютуб (YouTube):

6. Остановка проигрывания видео на определенном моменте

Это можно реализовать добавлением параметра end=105. Можете указать свое значение.

Пример кода YouTube:

Результат:

7. Автоматическое проигрывание видео при переходе на страницу

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

Пример добавления:

8. Отключение полноэкранного просмотра видео в панели видеоплеера

Реализуется добавлением параметра fs=0

Пример кода с ютуб:

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

Источник: http://nazyrov.ru/8-sposobov-xitro-vstavit-video-s-yutub-youtube.html

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

Содержание:

Урок наглядно покажет: как вставить видео на веб-страницу любой версии html. Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.

Вначале о том, как вставить видео на страницу с любой версией HTML (4.01, HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере (IE не ниже v.9) и каким-бы устройством он не пользовался.

Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.

Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):

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

Скачать видео

Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега Видео в данном примере: preload=»auto» — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем; controls — показывает панель управления видео.

Замените пропорционально ширину и высоту видео (width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.

Последние две строчки: теги P и A с содержимым — позволят пользователю скачать видеофайл, если он всё-таки не сможет его просмотреть.

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

AddType video/ogg.ogv
AddType video/mp4.mp4
AddType video/webm.webm

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

Вставка видео в HTML5 без плеера

А так можно вставить видео на страницу с HTML5, здесь атрибут poster — это путь к изображению-заставке:

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

Скачать видео

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.

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

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

Вставка аудио

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается старыми браузерами (IE ниже v.9).

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

Ваш браузер не поддерживает прослушивание

Скачать аудио

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

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).

Способ 2. Скачайте mp3-плеер (flv-mp3.com/ru) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.е. задать ему свои настройки:

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

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

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

Источник: http://WebmasterSam.ru/web-html-izuchenie-video.html

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

Вы здесь: Главная — HTML — HTML Основы — Как вставить видео на сайт

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

Начнём с того, что существует два способа вставки видео на сайт: с видеосервиса (например, с Youtube, Rutube и других) и просто с обычного видеофайла, который может располагаться на любом сайте.

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

Лучшее видео недели!

Тут всё просто, и Вам совсем не надо разбираться, что там понаписано.

А вот второй способ немного сложнее. Тут Вам потребуется скрипт плеера, который будет Ваше видео проигрывать, и SWF-файл плеера. Существует много различных плееров, но мне понравился FlowPlayer (скачать FlowPlayer). Теперь посмотрим, как его установить и как с его помощью добавить видео на сайт.

Первым делом разархивируйте архив на Ваш сайт, например, в папку «flowplayer«. Далее Вы должны в теге страницы, на которую будет добавлено видео, написать следующую строку:

После этого на странице нужно добавить такие строки:

Вот и всё! Видео успешно добавлено на Ваш сайт. И Вы теперь не зависите от работоспособности видеохостингов, а зависите только от работоспособности Вашего сайта. Более того, никакой посторонней рекламы видеохостингов Ваши пользователи не увидят. Однако, в этом способе добавления видео есть один серьёзный минус: ОЧЕНЬ большая нагрузка на сервер.

Если это видео смотрит 5 человек в день, то проблем не будет, а если смотрят 20 человек одновременно, то ничего кроме злости Вашего посетители не испытают. Но выход из этого положения есть: использовать сторонный сервис хранения файлов, например, Amazon S3, о котором я расскажу в одной из следующих статей, так что не переключайтесь.

Если Вы хотите узнать больше по HTML, то посмотрите бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:<\p>

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник: https://MyRusakov.ru/html-video.html

Как вставить видео в вордпресс

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

Добавить видео на сайт можно двумя способами: закачать ролик себе на хостинг, или его размещение на каком-либо видеохостинге, например, YouTube.

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

Именно вариант добавления видео на сайт с Ютуб и будет рассмотрен ниже. WordPress позволяет вставить видео с YouTube как с помощью плагинов, так и без них.

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

На сайт можно вставить абсолютно любое видео с YouTube, но желательно, чтобы это был видеоролик «залитый» на ваш канал. Так как в описание к нему расположите ссылку на свой интернет-ресурс.

Итак, поехали!

Выбираете видео. Под ним есть кнопка Поделиться 1. Жмёте. Переходите на вкладку Сгенерировать HTML-код 2. В окне появится сгенерированный html-код. Но не торопитесь копировать.

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

Тут же можно отключить показ других видеороликов после окончания вашего. Далее копируйте код.

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

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

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

Вот в принципе и всё! Теперь у вас не будет стоять вопрос как вставить видео в вордпресс. Вы с легкостью будете добавлять видео на сайт с YouTube.

Желаю удачи!

С уважением, Павел Коновалов

P.S. Смотрите короткое видео про Супер автобус МАН!

Источник: https://konovalovpavel.ru/kak-vstavit-video-v-vordpress/

Вставить видео с 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» сразу после идентификатора ролика:

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://leonov-do.ru/youtube/kak-vstavit-video-s-youtube-na-sajt-wordpress.html

Как добавить видео на лендинг при помощи тегов html5?

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

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

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

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

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

Для того, чтобы это исправить необходимо сохранить видео в нескольких форматах и дописать несколько строчек кода. Наиболее популярные это: mp4, webm, ogg. Или даже не наиболее популярные, а те, которые позволяют осуществить максимальный охват.  (Если будет интересна эта тема – пишите в комментариях, я сделаю обзор какой-нибудь программы для конвертирования видео)

Формат не поддерживается

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

Дело в том, что браузер в первую очередь проверяет его.  Атрибут “poster” – задает изображение, которое будет выводиться до начала воспроизведения.(Если быть точным, то до определения того формата, который может воспроизвести)

Но и это еще не все.  Старые браузеры не поддерживают теги html5 (ну, или частично поддерживают). В таком случае нам необходимо подстраховаться и сказать браузеру, чтобы он пытался воспроизвести видео при помощи flash– плеера.

Формат не поддерживается

Как вы могли заметить, я добавил атрибут «controls» — для того, чтобы появились элементы управления, такие как перемотка, пауза и т.д. А также тег . Он говорит браузеру что нужно делать, если не один из форматов невозможно воспроизвести. В нашем случае — это попытка открыть видео во flash-плеере и, в случае неудачи, выдать сообщение о том, что формат не поддерживается.

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

  • autoplay — автоматическое начало воспроизведения видео.
  • height, width — высота и ширина.
  • preload — буферизация видео (предзагрузка как в ютубе)

А на сегодня — все. Теперь вы знаете, как добавить видео на сайт при помощи тегов html5. Скоро я расскажу вам, как встроить видео на сайт из Youtube. Пока!

Источник: https://smartlanding.biz/kak-dobavit-video-na-sajt-s-ispolzovaniem-tegov-html5.html

Как сделать адаптивное видео (правильная вставка видео на сайт) | Просто делай так

Здравствуйте, друзья! Все мы знаем, что поисковые системы оценивают мобильность темы сайта. В Сети уже валом адаптивных тем для всех типов CMS.

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

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

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

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

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

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

Обычно вставляют видео через шорткоды самого WordPress (добавить медиафайлы со стороннего сайта)

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

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

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

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

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

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

ссылка на видео

Но конечно само по себе помещение в контейнер не даст ничего, если не прописать стили в файле CSS темы:

/* Код для адаптации видео */ .video-responsive { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-responsive iframe, .video-responsive object, .video-responsive embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Конец кода для адаптации видео */

После этого останется просто ссылаться на указанные стили при вставке видео. Для этого в режиме редактора «Текст» к тому самому блоку , про который я писал выше, нужно добавить класс стилей и все автоматом встанет на места:

ссылка на видео

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

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

За счет добавления такой записи уже будет без разницы, как Вы вставляете свое видео — оно прекрасно будет адаптироваться.

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

Дополнительно бы посоветовал заменить указанные  явно параметры фрейма по высоте и ширине (в вышеприведенном коде — это  width=″560″ height=″315″) на такие: width=″auto″ height=″auto″.

Это позволит фрейму занять всю доступную ширину и освободит Вас от необходимости центровки.

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

Как это сделать смотрите в статье Как правильно проверить сайт на мобильность с помощью браузера. И если видео на Вашем сайте вылезает за край, то просто скопируйте стили из статьи и добавьте к себе на сайт в файл CSS стилей.

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

С уважением, Сергей Почечуев

ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!

    ЧИТАТЬ ЕЩЕ ИНТЕРЕСНЫЕ СТАТЬИ:

Источник: http://prostodelaytak.ru/kak-sdelat-adaptivnoe-video-ili-pravilnaya-vstavka-video-iz-youtube-na-sajt/

Ссылка на основную публикацию