Safari на iPad (iOS6) не масштабирует видео HTML5, чтобы заполнить 100% ширины страницы
Я использую следующий CSS для отображения видео в полную ширину (100%) на адаптивной странице HTML5. Собственный размер видео 480x270. Видео масштабируется так, чтобы заполнить всю ширину страницы во всех настольных браузерах при сохранении соотношения сторон.
Однако Mobile Safari и Chrome на моем iPad (iOS 6.0.1) показывают черный прямоугольник с той же шириной, что и страница. Видео очень маленькое и отображается в оригинальном размере (480x270) в центре черного прямоугольника.
video {
width: 100%;
max-width: 100%;
height: auto;
}
вдохновленhttp://webdesignerwall.com/tutorials/css-elastic-videos, На этой странице есть комментарий, который наводит меня на мысль, что в iOS6 есть регресс.
Поскольку обновление моего iPad до iOS 6 кажется, что это исправление больше не работает, я думаю, что его высота: авто вызывает проблему. Кто-нибудь испытал подобное и есть исправить?
Кто-нибудь еще испытывает эту проблему? Есть ли способ отобразить HTML5-видео во всю ширину на iPad (iOS6), сохранив соотношение сторон только с помощью CSS?
HTML выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="file.mp4" type="video/mp4">
<source src="file.webm" type="video/webm; codecs=vp8, vorbis">
<source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>