Как сделать видео по центру в html

Как сделать видео по центру в html

Тег выравнивает содержимое контейнера по центру относительно родительского элемента.

Синтаксис

Текст

Атрибуты

Аналог CSS

Закрывающий тег

Валидация

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

HTML 4.01 IE Cr Op Sa Fx

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

Результат данного примера показан на рис. 1.

Рис. 1. Текст, выровненный по центру веб-страницы

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Как сделать видео по центру в WordPress

Не получилось вывести видео по центру в записях WordPress? Возможно, что ваша запись выглядит следующим образом:

Тогда вам поможет простой совет, приведенный ниже.

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

Для следующего приема вам понадобится не просто вставить URL, а получить полный embed-код для видео.

Как только у вас будет embed-код, перейдите на вкладку TEXT в вашем редакторе и поместите ваш embed-код в середину следующего фрагмента вместо текста «embed-code».

embed-code

Выглядеть это будет следующим образом:

Все готово. В итоге вы должны получить видео по центру страницы, как показано ниже:

Подгоняем видео по ширине страницы

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

Сделать это можно при помощи все того же embed-кода. На YouTube (или в любом другом сервисе) просто измените размер встраиваемого видео. Сам YouTube значительно упрощает этот процесс. Достаточно просто указать ширину, которая вам требуется, после чего сервис автоматически подгонит высоту видео, чтобы пропорции ролика сохранились.

Допустим, к примеру, что ширина области контента моего сайта составляет 700px. Тогда мне надо поместить это значение в поле width для видео YouTube. Вы также можете заметить, что размеры видео меняются в самом embed-коде. Если вы не знаете ширины своих записей, просто поиграйте с этим параметром в embed-коде.

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

Вот как будет выглядеть видео, выровненное по ширине страницы:

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

Адаптивное видео для сайта с помощью CSS

Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено.
А ведь существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, Vimeo и других.

Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, заблаговременно создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe , object и embed , следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.

CSS

.video-responsive  position: relative; padding-bottom: 56.25%; height: 0; overflow:hidden; > .video-responsive iframe, .video-responsive object, .video-responsive embed  position: absolute; top: 0; left: 0; width: 100%; height: 100%; >

.video-responsive < position: relative; padding-bottom: 56.25%; height: 0; overflow:hidden; >.video-responsive iframe, .video-responsive object, .video-responsive embed

Как видите всё очень просто, задаём относительное позиционирование для родительского блока и абсолютное относительно родителя, для встроенных элементов, определив им при этом, процентные значения ширины width: 100%; и высоты height: 100%; , чтобы в итоге видеоплеер смог растягиваться или сжиматься в соответствии размеров основного контейнера.

Со стилями разобрались, остаётся создать div контейнер с предопределенным классом, в нашем случае это class=»video-responsive» , затем вставить внутрь этого контейнера код нужного вам видеоролика, и всю эту конструкцию прописать там где вы планируете демонстрировать ваши и чужие видео-шедевры)).

div class="video-responsive"> iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen>iframe> div>

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

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

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

PS: После того, как статья увидела свет, в комментариях, lakispy внёс важные поправки, спасибо ему за это, каюсь, я как-то упустил из виду:

Для видео ВКонтакте iframe параметры ширины и высоты обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width=”auto” height=”auto” в фрейм

С Уважением, Андрей .

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

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

Тимофей : 14 августа, 2014 в 16:33 Отличный пример только я не могу с низу к плееру подогнать к примеру полосу прокрутки с меню видео роликов. пытался менять слои ничего не вышло условие padding-bottom: 56.25%; резервирует место (между родителем и вложенным iframe) в которое ничего нельзя вставить. Очень сильно мешает при вёрстке. Подскажите можно ли как то сократить это расстояние. Ответить

driver : 14 августа, 2014 в 20:24 Спасибо Тимофей за отзыв.
Однажды разруливали уже такую тему, там я использовал встроенное видео в блок аккордеона, кому-то было необходимо выводить блок с подписями к роликам непосредственно приклеенные к низу div-a с фреймом. Просто использовал дополнительный div и и всё.
Откопал в редакторе у себя, можете посмотреть, может это самое оно ))). Откроете Здесь>> Аккордеон на пункте «Встроенное видео», дальше думаю разберётесь, я подписал что куда вставлять. Исходники посмотрите там же в редакторе.
Удачи! Ответить

lakispy : 12 ноября, 2014 в 02:40 Для видео ВКонтакте iframe параметры ширины и высоты обязательны и если они не заданы, то встраиваются минимальные значения автоматически при загрузке страницы с фреймом. Так что добавляйте параметры width=”auto” height=”auto” в фрейм: Ответить

driver : 12 ноября, 2014 в 03:04 Спасибо за дополнение. В принципе можно указать и самые большие значения для фрейма, блок подстроится под размеры родительского контейнера. Ответить

Павел : 20 марта, 2015 в 23:11 Спасибо, воспользовался — все прекрасно работает. Особенно актуально для сайтов под смартфоны и прочие айфоны.))
Добавил в первый стиль вот такие параметры:
margin: 0px auto;
-webkit-box-shadow: 0 4px 24px rgba(50, 50, 50, 0.40);
-moz-box-shadow: 0 4px 24px rgba(50, 50, 50, 0.40);
box-shadow: 0px 4px 24px rgba(50, 50, 50, 0.40);
Получилось очень симпатично. Ответить

Сергей : 6 мая, 2015 в 00:39 Спасибо, Андрей — это, пожалуй, самое грамотное и понятное толкование о том, как сделать iframe с видео резиновым. Я воспользовался, огромное спасибо. (Единственное, что сделал отступы слева и справа). Ответить

driver : 6 мая, 2015 в 11:21 Сергей, спасибо за отзыв. Очень рад, что вам пригодилось. Ответить

Евгений : 7 мая, 2015 в 21:23 Огромное спасибо.
Сейчас разрабатываю сайт с видео и есть… была необходимость адаптировать размеры встроенного видео для различных устройств. Сайт делаю на cms Drupal, вставил ваши стили — и всё заработало как надо!!
Ещё раз ОГРОМНЕЙШЕЕ спасибо. Ответить

класс : 27 мая, 2015 в 09:52 Класс — всё работает! Ответить

Эля : 17 сентября, 2015 в 06:23 Спасибо большое за урок.
Как теперь выровнять видео по центру.text-align:center; не помогает(( Ответить

driver : 17 сентября, 2015 в 09:47 Здравствуйте, Эля.
Поместите блок с видео в дополнительный div с маржой 0 auto Стиль можете добавить напрямую к тегу в html, примерно так:

Ответить

Эля : 17 сентября, 2015 в 11:45 Спасибо за ответ. Но дополнительный div все-равно не помогает(( Ответить

Haskin : 24 октября, 2015 в 11:15 Спасибо автору огромное! Как раз был затык, как реализовать адаптивность видео на сайте. Ваш код очень помог — всё работает! Благодарю �� Ответить

Александр : 21 декабря, 2015 в 10:28 Спасибо большое, мне очень помогло Ответить

Dimon : 26 февраля, 2016 в 05:05 А можно сразу под несколько плееров, просто стоит переключатель плееров. Так бы отлично было поменять шаблон. Ответить

driver : 26 февраля, 2016 в 16:13 Конечно можно. Не имеет значения, какой плеер вы вставите в резиновый

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

Сергей : 16 марта, 2016 в 18:01 Здравствуйте, все плееры отлично подводятся под любые разрешения, но есть одна проблема. Основной плеер работает через script, код такого типа
и такой плеер не может подстроится под разрешение, только становится маленькое окошко, а сам плеер за границами и его полностью не видно. Помогите пожалуйста… Ответить

Karev : 4 апреля, 2016 в 06:04 Интересный урок. Спасибо.
Вопрос:
При обычном размещении ролика (iframe) с ютюба с параметрами width=”560″ height=”315″ он занимает окно ровно 560×315
При размещении с Вашим кодом он занимает 100% ширины страницы, т.е., если страница узкая, то всё нормально, а если, например, 1200 px, то ролик становится почти вдвое шире чем положенные «560».
Это так и задумано или я что-то делаю не правильно?
Помогает помещение всей конструкции в контейнер с max-width: 560px; — но это ж как то не кошерно (ролики ведь могут быть разной ширины…), да и max-width, видимо, не все браузеры «кушают». Ответить

driver : 4 апреля, 2016 в 18:36 Именно, всё так и задумано )).
Видеоплеер подстраивается под размеры родительского контейнера. Назвав это решение адаптивным, я конечно слегка погорячился, правильнее было бы обозвать видео отзывчивым или резиновым.
Ширина видео (iframe,object,embed) задана в процентах width: 100%; . Использование max-width вполне нормальная практика, свойство не срабатывает только в IE ниже 8-й версии. Ответить

Oleg Vest : 8 ноября, 2017 в 13:25 вордпрес сейчас прекрасно воспринимает различный код в частности блоки
я уверен вам будет полезно — если вы вставите ссылку на видео и в исходнике вашей статьи не в визуальном а в текстовом редакторе — обернёте данную ссылку в блок и пропишите ему следующие параметры

и тогда ваше видео не будет расползаться на всю ширину родительского блока в котором лежит ваша статья — изменяя параметры ширины блока и в %-ом соотношении вы сможете регулировать ширину вашего видео ролика + ко всему вы сохраните ему адаптивностть относительно ширины экрана устройства ну с помощью margin — вы сможете регулировать положение вашего блока Ответить

Сергей : 17 февраля, 2017 в 14:43 Олег, не работает! Вполне возможно, что это зависит от шаблона. Ответить

Сергей : 28 ноября, 2016 в 04:05 Спасибо, но у меня что-то не получилось, все сделал как у вас в демке, но почему-то все равно скроллинг горизонтальный… Ответить

Сергей : 17 февраля, 2017 в 14:49 Спасибо за полезные решения. Но так и не смог решить задачу, как сделать не 100 ширину показа, а, допустим, 90%. Догадываюсь, что виной всему параметр auto у ширины и высоты фрейма, который автоматом грузит видео на весь возможный div. C каким бубном сплясать в этом случае? Может есть решение? Ответить

driver : 17 февраля, 2017 в 20:12 Здравствуйте, Сергей.
Попробуйте в контейнер .video-responsive прописать:
margin: 0 auto;
width: 90%
см.пример Ответить

Леонид : 16 июля, 2017 в 20:27 Спасибо за урок. Хотелось бы узнать, как отключить авто воспроизведение? Ответить

iveri : 28 августа, 2017 в 02:18 Здраствуйте. все получилось спервого раза. только вот если я хочу разместить несколько видео то тогда как быть ? Ответить

Тимофей : 9 ноября, 2017 в 10:55 Спасибо,всю ночь мучился искал решение,ваш способ работает,спасибо. Ответить

Тимофей : 9 ноября, 2017 в 11:00 Вот еще способ,часто используемый,он адаптирует плеер,но высоту надо регулировать в ручную,иначе получается высота 100% а ширина в размер блока,такое некрасивое видео)).
embed,
iframe,
object max-width: 100%; Ответить

Антон : 19 февраля, 2018 в 23:55 Спасибо большое, помогло ) Как раз то, что искал �� Ответить

Виталий : 8 августа, 2018 в 21:34 Здравствуйте.Сделал все как Вы описали вот все хорошо, видео получилось адаптивным но на сайте оно стало отображаться таким же маленьким как и на мобильных устройствах. Меняю в классе div с авто на свои значения тогда всё перестает работать. Подскажите пожалуйста как решить вопрос? Ответить

driver : 8 августа, 2018 в 21:49 Здравствуйте, Виталий.
Если вы всё сделали, как расписано в уроке, проблем быть не должно, но всё-таки, хотя и не вижу ваших исходников, могу предложить одно решение, в селектор .video-responsive добавить:
margin: 0 auto;
width: 100% Ответить

Виталий : 8 августа, 2018 в 21:58 Не получается. Ссылку на сайт оставил Ответить
driver : 8 августа, 2018 в 22:26 Ответить

Виталий : 8 августа, 2018 в 22:34 В таблицу стилей самой темы я правильно понимаю? Если так то я это все прописал. Ответить

driver : 8 августа, 2018 в 23:43 Не знаю куда и что вы прописали, но в файле темы /wp-content/themes/azera-shop/style.css не нашёл ничего похожего на селектор .video-responsive . Конечно может я что то пропускаю, попробуйте добавить стили через панель управления: Внешний вид — Темы — Ваша тема — Настроить — Дополнительные стили, в этом пункте и прописываете необходимое Ответить

Виталий : 8 августа, 2018 в 23:41 Странно я все прописал в файле css все правила, но нечего не изменилось. Ответить

driver : 9 августа, 2018 в 00:01 Очистите кеш браузера и всё встанет на свои места, у меня видео отображается как надо на вашем сайте, согласно заданным параметрам и при изменении размеров окна, корректно изменятся в соответствии размеров родителя Ответить

Виталий : 8 августа, 2018 в 23:54 Да получилось, но сейчас видео стало наоборот большим, больше заданного значения. Ответить

driver : 9 августа, 2018 в 00:07 Я уже писал по этому поводу, просто в селектор .video-responsive добавьте:
margin: 0 auto;
width: 80%
значение свойства width: можете указать такое, какое вам нужно, 80% это чисто для примера Ответить

driver : 9 августа, 2018 в 00:10 Ну, или так как вы сделали, задав размеры непосредственно в iframe Ответить

Виталий : 9 августа, 2018 в 00:28 Ширина нормально можно указывать любое значение,а высоту как добавить что бы так же регулировать размер? Ответить

driver : 9 августа, 2018 в 01:40 Поэкспериментируйте с значением свойства padding-bottom: в селекторе .video-responsive , для начала замените padding-bottom: 56.25%; на padding-bottom: 26.25%; Ответить

Виталий : 9 августа, 2018 в 12:19 Добрый день. Благодарю за вашу интересную статью,Вы мне очень помогли. У Вас живой блог! Обязательно оставлю его в закладках )) Ответить

Эльдар : 25 августа, 2018 в 11:21 Спасибо, помогло, не отображалось корректно, вспомнил что нужно очистить кэш сайта(установлен для скорости отображения страниц) и все встало на свои места! Благодарю! Ответить

Сергей : 19 октября, 2018 в 02:03 Здравствуйте применил данный способ , всё хорошо , если видео расположено не в открывающейся вкладке на сайте. Сложность в том , что если видео разместить в анимированной вкладке ,на мобильном это видео не открывается во весь экран. Что посоветуете ? Ответить

Chingis : 8 ноября, 2018 в 05:14 как убрать автовоспроизведение? Ответить

driver : 8 ноября, 2018 в 05:37 1. Сразу после ссылки на ролик до кавычек вставьте ?autoplay=0 , если перед ним нет других параметров
2. И &autoplay=0 , если перед ним какие-то параметры уже присутствуют.
Ну, а самое простое, это вовсе исключить параметр autoplay из ссылки на видео.
Всё это касается настроек встраиваемого видео с Youtube, по-умолчанию ссылки на каждый ролик выдаются без параметра автовоспроизведения, так что смотрите свои ссылки на видео Ответить

Алексей : 24 ноября, 2018 в 22:29 Добрый день! Может не по теме, но!
У меня получилось сделать резиновым видео, но это немного не устраивает((
Подскажите пожалуйста, как сделать как у Вас в примере, слева (справа) текст и видео, разделенное чертой.
Весь блок так же адаптивный.
Буду благодарен за помощь Ответить

Адаптивная вёрстка, урок второй. Адаптивное видео на сайте

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

Тег позволяет воспроизводить видео со сторонних ресурсов, таких как YouTube и Vimeo. Элемент создаёт на странице вложенную область, в которую загружается другая html-страница (при наличии атрибута src ) или любой другой контент. Элемент не должен находиться внутри элемента или . Для элемента доступны глобальные атрибуты, а также собственные:

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
height	Задаёт высоту фрейма в px .
name	Имя встраиваемого контента, не должно начинаться со знака _ и должно содержать больше одного символа.
sandbox	Набор ограничений для страницы, загруженной во фрейм. Если значение атрибута не указано, применяются все ограничения одновременно. Возможные значения: allow-forms — разрешает встроенному контенту отправлять формы allow-scripts — позволяет запуск скриптов, принадлежащих фрейму, кроме всплывающих окон allow-top-navigation — позволяет открывать ссылки, находящиеся внутри фрейма, в родительском окне allow-same-origin — позволяет обрабатывать содержимое фрейма как уникальное, отдельно от содержимого родительской страницы.

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

1. Адаптивное HTML5 видео

Когда элемент впервые стал появляться на страницах сайтов, для воспроизведения видео-файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4 .

Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим элементу следующие свойства:

video

2. Адаптивное видео с YouTube или Vimeo

Видео с YouTube или Vimeo добавляется на страницу с помощью элемента . Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap . Получить код фрейма Vimeo можно по кнопке Share , далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».

Видео Vimeo

Видео YouTube

Чтобы сделать адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:

.thumb-wrap < position: relative; padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ height: 0; overflow: hidden; >.thumb-wrap iframe