Полноэкранный фоновый рисунок с использованием video.js

Question

Я пытаюсь создать полноэкранный видеоролик, который всегда показывает полный размер даже при изменении размера окна.

здесь это сайт: http://webkunst.comeze.com/test/

это проблема у меня есть:

на широком экране он показывает, как это: http://webkunst.comeze.com/test/wide.png

и на вертикальном экране он показывает, как это: http://webkunst.comeze.com/test/vertical.png

Как вы можете видеть, он всегда помещает несколько черных полос в видео вместо resizin g видео в полном объеме экрана.

Это моя разметка:

  <div id="full-background"> 
       <video class="video-js vjs-fullscreen" autoplay preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> 
        <source src="video/1.mp4" type='video/mp4' /> 
       </video> 
      </div> 

с этим CSS:

#full-background { 
    z-index: -999; 
    min-height: 100%; 
    min-width: 1024px; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
} 


.video-js.vjs-fullscreen { 
    position: fixed; 
    overflow: hidden; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    width: 100% !important; 
    height: 100% !important; 
    _position: absolute; 
    /* IE6 Full-window (underscore hack) */ 

} 

Я использую плагин video.js: http://videojs.com/

Любые идеи и как сделать видео полный размер без отображения черных полосок на стороне или сверху/снизу?

Answer 1

Похоже, вы можете указать только ширину видео по умолчанию и высоту здесь:

http://videojs.com/tag-builder/

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

Но вместо черных полос можно указать цвет:

.vjs-default-skin .vjs-play-progress { background: #900; } 

или кожи:

<video class="video-js my-custom-skin" ...> 

Источник: https://github.com/zencoder/video-js/blob/master/docs/skins.md

Answer 2

Вы можете использовать медиазапросы применять различные CSS классы в зависимости от соотношение сторон?

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

.video-js .vjs-tech { 
width: 100% !important; 
} 

video { 
    width:100%; 
} 

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

.video-js .vjs-tech { 
height:100% !important 
} 

video { 
width:auto !important; 
} 

Таким образом, вы можете использовать запросы средств массовой информации, как @media screen and (device-aspect-ratio: 16/9) применять различные размеры.

Answer 3

Вы попробовали BigVideo.JS? Он использует Video.JS как ядро ​​и строит его сверху. Для этого требуется только jQuery.