Лучший способ динамически изменить разрешение видео HTML5

Question

Каков наилучший способ динамического изменения ширины и высоты видео HTML5 на веб-странице?Поведение, на которое я ссылаюсь, является тем же самым во вводном видео http://flipboard.com/

. Когда размер окна изменяется, видео по-прежнему занимает 100% от видимого размера (без прокрутки).Я заметил, что размер видео в некоторой степени изменяется, но в какой-то момент он останавливается и обрезается.

Каков наилучший способ получить такое же поведение?Я хочу, чтобы видео занимало всю видимую область браузера без полос прокрутки.Это только на настольном компьютере / ноутбуке, я не рассматриваю какие-либо мобильные устройства для банкоматов.

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

Спасибо.

Answer 1

Вы можете сделать это с помощью «Отзывчивого CSS», есть несколько способов сделать это,
Вы можете установить viewport, max-width, min-width и т. д.
По этой ссылке есть хорошее объяснение, как это сделать: http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

Answer 2

Похоже, у них свойства css высоты и ширины установлены на 100%. Если вы используете инспектор элементов, такой как встроенный в Chrome или Firebug для Firefox, вы сможете увидеть, как именно они структурировали html / css для элемента video, а также для div, в который он вложен. Затем, как вы сказали, также установите свойство min-width / min-height.

Если я не правильно понял ваш вопрос, все должно быть так просто. Надеюсь, это поможет!