Создание iframe заполнения экрана на мобильном устройстве

Привет, как вы можете видеть из фотографий, которые я приложил. Мне удалось создать веб-страницу, содержащую видео через iframe. Он вращается на мобильных устройствах, когда портретная ориентация обнаружена, поэтому видео всегда воспроизводится в альбомной ориентации. У меня теперь есть работа, однако моя проблема заключается в том, что мобильное устройство удерживается в ландшафтном режиме, а видео полноэкранное и прекрасно работает, как вы можете видеть на изображении ниже.Создание iframe заполнения экрана на мобильном устройстве

MOBILE DEVICE HELD IN LANDSCAPE

Когда устройство проходит в портретном режиме, (нормальный) видео поворачивается на бок, как это следует, однако, он не заполняет экран. Изображение, которое показывает это, можно найти ниже.

MOBILE DEVICE HELD IN PORTRAIT

Все, что мне нужно сделать, это сделать видео на весь экран, когда устройство проходит в портретной, так же, как это делает в ландшафте.

Мой код ниже:

CSS

<style> 
* { 
height: 100%; width: 100%; top: -20px; left: 0px; 
} 

@media (orientation: portrait) { 
body { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
transform: rotate(-90deg); 
} 
} 
</style>

HTML

<body> 
     <div><iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div><script src="//fast.wistia.net/assets/external/E-v1.js"></script> 
    </div> 
</body>

ALSO HERE IS A LIVELINK TO THE OFFENDING PAGE SO YOU CAN VIEW THE SOURCE YOURSELF

источник

2015-03-25 jeff rush

Я думаю, что я начинаю понимать проблему, но ваши ссылки не работают. Не могли бы вы найти лучшего хоста или [поместить свой код в JSFiddle] (http://www.jsfiddle.net/)? – Geo1088

Я думаю, вы идете об этом неправильно. Вместо того, чтобы пытаться установить поворот для iframe, почему бы вам не использовать абсолютное позиционирование для его размера?

iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<iframe src="http://www.example.com/">

Делая это, как это говорит браузер только, чтобы сделать содержание заполнения экрана, и вы не должны обрабатывать вращение или что-нибудь еще.

источник

2015-03-25 20:41:03 Geo1088

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

Создание iframe заполнения экрана на мобильном устройстве

ответ

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