Видео 100% ширина и высота

Question

У меня есть видео, и я хочу, чтобы он заполнил 100% ширины и 100% высоты. И сохраните пропорции.

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

HTML:

<video preload="auto" class="videot" id="videot" height="100%" preload> 
    <source src="BESTANDEN/video/tible.mp4" type="video/mp4" > 
    <object data="BESTANDEN/video/tible.mp4" height="1080"> 
     <param name="wmode" value="transparent"> 
     <param name="autoplay" value="false" > 
     <param name="loop" value="false" > 
    </object> 

CSS:

.videof, .videot { 
    width: 100% !important; 
    height: 100% !important; 
} 

Answer 1

Вы можете использовать Javascript динамически установить высоту до 100% от окна а затем центрировать его, используя отрицательное левое поле, основанное на соотношении видео w idth до ширины окна.

http://jsfiddle.net/RfV5C/

var $video = $('video'), 
    $window = $(window); 

$(window).resize(function(){ 
    var height = $window.height(); 
    $video.css('height', height); 

    var videoWidth = $video.width(), 
     windowWidth = $window.width(), 
    marginLeftAdjust = (windowWidth - videoWidth)/2; 

    $video.css({ 
     'height': height, 
     'marginLeft' : marginLeftAdjust 
    }); 
}).resize(); 

Answer 2

video { 
    width: 100% !important; 
    height: auto !important; 
} 

Посмотрите здесь http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer 3

для достижения этой цели я использую JavaScript и CSS. Функция JS нужно вызывать один раз при инициализации и при изменении размера окна. Просто протестирован в Chrome.

HTML:

<video width="1920" height="1080" controls> 
    <source src="./assets/video.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

JavaScript:

function scaleVideo() { 
    var vid = document.getElementsByTagName('video')[0]; 
    var w = window.innerWidth; 
    var h = window.innerHeight; 

    if (w/16 >= h/9) { 
     vid.setAttribute('width', w); 
     vid.setAttribute('height', 'auto'); 
    } else { 
     vid.setAttribute('width', 'auto'); 
     vid.setAttribute('height', h); 
    } 
} 

CSS:

video { 
    position:absolute; 
    left:50%; 
    top:50%; 
    -webkit-transform:translate(-50%,-50%); 
    transform:translate(-50%,-50%); 
} 

Answer 4

Это работает для меня видео в сНу контейнере.

.videoContainer 
 
{ 
 
    position:absolute; 
 
    height:100%; 
 
    width:100%; 
 
    overflow: hidden; 
 
} 
 

 
.videoContainer video 
 
{ 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
}

Ссылка: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Answer 5

Проверив другие ответы, я использовал объектно-FIT в CSS:

video { 
    object-fit: fill; 
} 

От MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

Объектно-ориентированное свойство CSS указывает, как содержимое замененного элемента должно быть установлено в поле, установленное его используемой высотой и шириной.

Значение: заполнить

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

Answer 6

Я новичок во всем этом. Возможно, вы можете просто добавить/изменить этот HTML-код. Без CSS. Он работал для меня :)

width="100%" height="height" 

Answer 7

Если вы ищете эквивалентной background-size: cover для video.

video { 
    object-fit: cover; 
} 

Это заполнит контейнер без искажения видео.

---

^{PS: Я распространяющееся на Leo Yu's answer здесь.}