НГС.Форум /Компьютеры Интернет Связь / Новосибирский интернет /

не масштабируется при ресайзе?

Печать RSS Деревом

System32
guru
Сообщений: 3277
18.03.15 13:29
Имеем некий блок <video></video>

<video data-showcase-video webkit-playsinline poster="/videos/Oka_copyrightdownloopscom.jpg" loop autoplay>
<source src="/videos/background.webm" type="video/webm" />
<source src="/videos/background.mp4" type="video/mp4" />
<source src="/videos/background.ogg" type="video/ogg" />
</video>

Само видео размером 800 на 600 пикселей

его css

position: absolute;
z-index: 0;
top: 0px;
left: 0px;
width: 100%;
height: auto;
max-width: 100%;
backface-visibility: hidden;

Для того чтобы это видео растягивалось по горизонтали при увеличении разрешения экрана (например широкоформатый монитор), достаточно указать свойство
width: 100%; - это работает
Логично предположить чтобы растянуть видео по вертикали указать height: 100%;
Но это не работает. Свойство width: 100%; в этом случае отключается и по краям экрана имеет черные квадраты.

Как без применения js, растянуть видео и по вертикали тоже?
КопироватьСсылка
Рассказать друзьям
lenchik_
activist
Сообщений: 231
27.03.15 21:03Ответ на сообщение не масштабируется при ресайзе? пользователя System32
попробуйте открыт в хроме какой нибудть пример с видео и копипейстить стиль оттуда

вот здесь с модалем (всплывающем окном)
http://www.worldventuresfoundation.org/getinvolved/serviceexcursions

копипесччу с хрома 768px
```
@media screen and (max-width: 768px)

#wvf-video-modal.modal, #volountours-video-modal.modal, #video-modal.modal {

  width: 97% !important;

  left: 3%;

  margin-left: -10px !important;

}
```
```
@media screen and (max-width: 768px)

#wvf-video-modal #video-1, #volountours-video-modal #volountours-video, #video-modal #video-1 {

  width: 98% !important;

}
```
```
.video-js .vjs-tech {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}
```
В Network смотрю версию Video.js

Video.js - HTML5 Video Player
Version 3.2.0

пожалуйст используйте "code" таг когда пишите примеры кода
КопироватьСсылка
Рассказать друзьям
lenchik_
activist
Сообщений: 231
27.03.15 21:15Ответ на сообщение не масштабируется при ресайзе? пользователя lenchik_
вполне возможно, что использования video.js (скачайте) поможет

в коде вроде height 100% есть, но

не уверена, что ответила по существу вопроса

"растянуть видео по вертикали"
КопироватьСсылка
Рассказать друзьям

НГС.Форум /Компьютеры Интернет Связь / Новосибирский интернет /

Перейти в форум

открыть в новом окне

Модераторы: