Как часто при использовании встроенного видео из различных источников у себя на сайте или блоге, вам приходилось подгонять размер того или иного видеоролика, предварительно изменяя заданные значения ширины и высоты плеера? Думаю, что большинство блогеров именно так и поступают, раз за разом, в ручную прописывают необходимые параметры, для того чтобы встроенное виде не выходило за границы блока, в котором оно расположено.
А ведь существует довольно простое и изящное решение, существенно облегчающее этот процесс. Приведу простой пример и в довесок нему готовый набор правил CSS, для реализации абсолютной отзывчивости встраиваемого видео через iframe, object и embed с популярных видео-сервисов, таких как YouTube, Vimeo и других.
Для того чтобы видео автоматом подстраивалось под размеры родительского блока, достаточно в таблице стилей CSS, заблаговременно создать отдельный класс и определить все необходимые свойства для создания «резинового» контейнера, в котором и будет в последующем располагаться встроенный видеоролик. А так как видео-сервисы предлагают различные методы вставки видео на сайт, iframe , object и embed , следует учесть эту особенность, и задать стили для всех этих вариантов сразу. Тем самым в дальнейшем, мы избавим себя от лишних и ненужных телодвижений.
Как ВСТАВИТЬ ВИДЕО из YOUTUBE на сайт WORDPRESS и как выровнять видео по центру или по ширине сайта.
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” в фрейм
С Уважением, Андрей .
Всего комментариев: 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. И https://dbmast.ru/adaptivnoe-video-dlya-sajta-s-pomoshhyu-css» target=»_blank»]dbmast.ru[/mask_link]
Руководство для начинающих: Как отцентрировать видео в WordPress
Вы хотите отцентрировать видео в WordPress? По умолчанию, если ширина вашего видео меньше вашей области статьи, то WordPress автоматически выравнивает ее влево, оставляя дополнительное пустое пространство на правой стороне. В этой статье мы покажем вам, как легко отцентрировать видео в WordPress.
Зачем выравнивать по центру видео в WordPress?
П о умолчанию, когда вы встраиваете видео в WordPress, оно автоматически выравнивается по левому краю. Это потому, что видео контент не встроен в содержаниие, поэтому WordPress не может угадать, как вы хотели бы отобразить его.
В качестве лучшей практики, она автоматически выравнивает ее влево. Оставив его до вас, чтобы настроить выравнивание, если это необходимо.
Чем монтировать ролики перед загрузкой? Обзор бесплатных альтернатив YouTube редактору для видео
Если в прошлом вы регулярно загружали видео на YouTube, возможно, вам приходилось работать с их встроенным видеоредактором. Он бы минималистичен, удобен для базовых операций и, конечно же, подкупал многих пользователей тем, что не нужно было переключаться между десктопом и браузером. Благодаря этому, YouTube редактор здорово сокращал время публикации видео онлайн.
Однако в сентябре 2017 Google объявила о прекращении поддержки инструмента. Причины? Официально, встроенный редактор YouTube включал множество функций, не пользующихся достаточным спросом у аудитории, и поэтому, вместо того, чтобы продолжать поддерживать непопулярные приложения, компания решила сфокусироваться на наиболее полезных. Но об этом чуть позже — ведь вы наверняка попали на эту страницу в поисках альтернативных решений и бесплатных видеоредакторов.
В этой статье мы расскажем о трёх программах, которые помогут вам обработать видео и создать эффектный ролик для загрузки на YouTube.
Зачем вам целых три инструмента? Во-первых, мы постарались подобрать программы для обеих ОС – Windows и Mac, чтобы обе категории пользователей могли найти вариант для своего компьютера. Во-вторых, программы, вошедшие в обзор, отличаются по своей функциональности и сложности в использовании.
По правде говоря, даже профессиональные видеоблогеры редко ограничиваются одним-единственным редактором. Ведь продукт может быть идеальным для цветокоррекции, но при этом не иметь достаточных инструментов для работы с текстом — и наоборот. В зависимости от ваших задач, использовать несколько разных решений для достижения результата – абсолютно нормально и даже рекомендовано.
VSDC – Бесплатный редактор видео для YouTube на русском (Windows ОС, скачать)
Интерфейс VSDC заметно отличается от YouTube редактора. VSDC – чуть более сложный и намного более мощный инструмент. Он получил особую популярность среди технологических энтузиастов, гиков и владельцев экшн-камер.
Используется: зарубежным блогером и экспертом в области дронов — Quadcopter 101, русскоязычным видеоблогером и владельцем канала КиноМира.ру.
Рекомендован: официальным сообществом GoPro, YouTube-геймерами, IT-изданиями.
Received honorable mentions from a video editing expert Justin Brown at Primal video, VidProMom, and Steven Van.
Почему VSDC — хороший выбор, если вы ищете YouTube редактор для видео
Во-первых, VSDC — видеоредактор нелинейный. Это значит, что вы сможете намного больше, чем просто последовательно соединить видео и фото фрагменты, добавив переходы и анимацию. Например, вы сможете применить такие популярные эффекты как картинка в картинке, создать видео в стиле теленовостей с бегущей строкой, разделить экран на несколько частей, в каждой из которых будет проигрываться отдельный ролик, постепенно приблизить объект в кадре, и так далее. Кроме того, в VSDC есть функциональный редактор текста, позволяющий добавлять стильные заголовки и комментарии.
Во-вторых, VSDC абсолютно бесплатен. Стоит отметить, что компания-разработчик предоставляет PRO-версию для тех, кто занимается монтажом на более профессиональном уровне – подписка стоит $19 в год. Для большинства пользователей, главная отличительная черта версии PRO в том, что она позволяет активировать аппаратное ускорение, а значит, экспорт готового видео будет намного быстрее, поскольку задействуются дополнительные ресурсы компьютера. Однако если вы только начинаете осваивать нелинейное видеоредактирование, возможностей бесплатной версии VSDC должно быть более чем достаточно.
В-третьих, вы можете загружать видео на YouTube непосредственно из программы, когда закончите процесс редактирования. Эта функция отлично экономит время, ведь во многих других редакторах для YouTube, вы сперва должны сохранить готовый проект на компьютер, а затем уже загрузить на канал.
Если вы планируете создавать видео-реакции или видеоинструкции, VSDC – подходящий инструмент, поскольку имеет встроенные приложения для записи изображения на экране и прямой записи со сторонних источников (например, веб-камеры, подключенной к компьютеру). Другими словами, вам не придётся искать стороннее ПО для выполнения этих смежных задач – всё доступно непосредственно в интерфейсе VSDC. Наконец, вы сможете применить популярный инструмент Chroma Key, если съёмка ведётся с зелёным экраном для последующей подмены фона на видео.
Дополнительно почитать о работе с зелёным экраном и применении эффекта Хромакей можно здесь).
На официальном YouTube канале VSDC более 200 видеороликов и инструкций по использованию программы и применению различных эффектов. Поэтому, если вы готовы выделить немного времени для ознакомления с интерфейсом и основными комбинациями, VSDC может стать вашим основным кандидатом на роль замены YouTube редактора для видео.
Чтобы иметь представление о том, насколько легко достигаются, казалось бы, сложные эффекты в VSDC, посмотрите ролик, встроенный ниже. Меньше чем за минуту вы научитесь создавать красивую заставку, часто используемую на ТВ – «видео внутри текста». А главное – вам не понадобится опыт видеоредактирования или какие-либо специальные технические знания.