Авто размер видео html

19.12.202304.07.2023 admin 0 Comments

Как сделать responsive video

Есть много способов размещения и отображения видео на сайте. Вы можете размещать файлы видео на сервере хостинга и отображать его с помощью тега HTML5 video. Возможно, вы используете для отображения видео YouTube или Vimeo с помощью iframe. Также можно использовать сервисы Viddler или Blip.tv, которые добавляют в код объект для отображения флеш плеера. В каждой случае для отображения видео необходимо добавлять фиксированную высоту и ширину. Например так:

И вот тут начинаются проблемы. Объявление фиксированных размеров для видео является не допустимым, если вы собираетесь использовать его в резиновом или адаптивном контексте. Что делать, если родительский контейнер будет сжиматься менее, чем на 400px? В этом случае контейнер с видео не будет сжиматься и выглядеть это будет ужасно.

Итак, можно ли обойти проблему так?

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

Резиновое видео для iframe видео (YouTube, Vimeo)

Наш маленький трюк, рассмотренный выше, со 100% шириной не может при размещении видео с помощью iframe. Указывать высоту в этом случае необходимо, так как в противном случае браузеры будут использовать для iframe высоту 150px (видео скорее всего будет выглядеть обрезанным). Буквально все браузеры будут отображать iframe, canvas, embed и object с размерами 300 пикселов по ширине и 150 по высоте, если этим тегам не указать нужные размеры.

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

Этот метод замечательный, но у него есть несколько ограничений:

Если приведённые выше решения вас не устраивают, есть способ основанный на javascript. Представим себе: при загрузке страницы все соотношения сторон для видео будут сохранены. После этого, при изменении размера окна, видео будет заполнять всю ширину родительского контейнера с сохранением пропорций. На jQuery это выглядит так:

Responsive видео для vimeo

Vimeo использует для видео фреймы, так что техника, ипользуемая для YouTube будет работать в этом случае тоже. HTML/CSS техника полностью такая же, а вот для jQuery необходимо поменять одну строчку:

Делаем резиновое видео для object и embed Video (Viddler, Blip.tv)

Некоторые сервисы, такие как Viddler и Blip.tv используют устаревшие теги object и embed. Не так давно эти теги использовал и YouTube. Предложенный ниже способ нестандартный, но полностью рабочий.

Тегам object и embed для отображения видео, как и iframe, требуется фиксированная ширина и высота.

Если вас устраивает внедрение дополнительной обёртки, то можно опять же использовать метод Thierry:

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

Источник

CSS: Резиновое видео

Резиновое видео HTML5

Видео элемент HTML5 вы можете легко сделать резиновым при использовании max-width:100%. Как упомянуто во введении, этот трюк не работает, если использовать iframe или другие методы, которыми пользуются большинство сайтов для хранения видео, таких как YouTube и Vimeo.

Резиновый объект & встроенное видео

На самом деле, решение очень простое. Вы должны поместить видео в отдельный div блок и выставить значения нижнего внутреннего отступа в 50%-60%. Затем можно определить дочерние элементы (iframe, встраиваемый объект), 100%-ая ширина, 100%-ая высота, с абсолютным позиционированием. Это и есть решение нашей задачи.

Как создать фиксированную ширину + резиновый принцип

Чтобы ограничить ширину видео, нам снова понадобится дополнительный div. Далее воспользуемся свойством max-width:100 %.

Совместимость

Это решение работает на всех браузерах (проверены на Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone и iPad).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com/tutorials/css-elastic-videos
Перевел: Станислав Протасевич
Урок создан: 25 Июня 2011
Просмотров: 44515
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

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

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

Вставить и адаптировать HTML5 видео

Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.

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

Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.

.movie <
width: 100%;
height: auto;
margin: 0 auto; // выравнивает по центру по вертикали
display: block;
max-width: 500px;
>

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

Адаптивное видео с Ютуба

Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.

Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.

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

.movie-container <
position: relative;
padding-bottom: 56.25%; // сохраняет пропорции
height: 0;
overflow: hidden;
display: block;
>

Мы расположили iframe относительно контейнера и приняли меры предосторожности на случай переполнения контейнера.

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

Создадим ещё один блок-обертку, который ограничит размеры и отцентрирует видео.

.movie-fixed <
max-width: 500px;
margin: auto;
>

HTML разметка целиком.

Адаптивное видео на Bootstrap

У Bootstrap уже есть готовые классы, чтобы видео было адаптивным. Один класс присваивается самому объекту:

Два других класса – блоку-обертке.

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

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

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

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

Порекомендуйте эту статью друзьям:

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

Комментарии ( 1 ):

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо, воспользовался — все прекрасно работает. Особенно актуально для сайтов под смартфоны и прочие айфоны.))
Добавил в первый стиль вот такие параметры:
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);
Получилось очень симпатично.

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

Сергей, спасибо за отзыв. Очень рад, что вам пригодилось.

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

Класс — всё работает!

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

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

Спасибо за ответ. Но дополнительный div все-равно не помогает((

Спасибо автору огромное! Как раз был затык, как реализовать адаптивность видео на сайте. Ваш код очень помог — всё работает! Благодарю 🙂

Спасибо большое, мне очень помогло

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

Конечно можно. Не имеет значения, какой плеер вы вставите в резиновый

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

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

вордпрес сейчас прекрасно воспринимает различный код в частности блоки
я уверен вам будет полезно — если вы вставите ссылку на видео и в исходнике вашей статьи не в визуальном а в текстовом редакторе — обернёте данную ссылку в блок и пропишите ему следующие параметры

Олег, не работает! Вполне возможно, что это зависит от шаблона.

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

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

Спасибо за урок. Хотелось бы узнать, как отключить авто воспроизведение?

Спасибо,всю ночь мучился искал решение,ваш способ работает,спасибо.

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

Спасибо большое, помогло ) Как раз то, что искал 🙂

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

Не получается. Ссылку на сайт оставил

В таблицу стилей самой темы я правильно понимаю? Если так то я это все прописал.

Странно я все прописал в файле css все правила, но нечего не изменилось.

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

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

Ну, или так как вы сделали, задав размеры непосредственно в iframe

Ширина нормально можно указывать любое значение,а высоту как добавить что бы так же регулировать размер?

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

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

как убрать автовоспроизведение?

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

Автомобильный онлайн портал autobk.ru

Авто размер видео html

Как сделать responsive video