Видео не правильно масштабируется на мобильном устройстве

Я встроил видео в DIV и хочу, чтобы он масштабировался в зависимости от размера браузера (до определенной точки). Все это работает отлично, но на iPhone масштабирование не работает.Видео не правильно масштабируется на мобильном устройстве

Вот живая ссылка, которая работает: http://www.craigzilla.dk/upload/template.html

А вот скриншот того, как он выглядит на iPhone, где видео не масштабируются, чтобы соответствовать по горизонтали: https://www.dropbox.com/s/xs2fex89td710ip/Photo%2005-09-13%2016.11.14.png

И здесь является jsFiddle http://jsfiddle.net/craigzilla/EWgFm/

Вот видео CSS:

.projectWrapper { 
    max-width: 960px; 
    min-width: 320px; 
    margin: auto; 
} 
video { 
    width: 100%; 
}

Любые идеи, как я могу заставить видео заполнить горизонтальное пространство?

источник

2013-09-05 Craig Jonathan Kristensen

Пробовали ли вы 'видео { ширина: 100% важно; } ' –

Не уверен, я не могу реплицировать в своем браузере. Я предполагаю, что это iPhone. Где-то у вас есть минимальная высота? Это объяснило бы это, ну, если бы это произошло повсюду. – Jacques

видео {ширина: 100%! Important; } не имеет значения. , и у меня нет нигде. –

-1

Try с этим:

CSS:

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

HTML:

<div class="video-container"> 
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> 
</div>

Demo

источник

2013-09-06 15:02:07

это не работает, если вы используете тег '

Видео не правильно масштабируется на мобильном устройстве

ответ

Смежные вопросы