3

Есть виде. Размещаю вот так

<video loop autoplay="autoplay" type="video/mp4" width="100%"class="video"src="videi.mp4"></video>

Воспроизводить все ок, показывает на всю ширину. Но вот косяк, при расширении 1024*768 Пикселей, показывает не на всю высоту. (1 ое фото все хорошо, 2-ое при расширении 1024*768) Как сделать так что бы оно расширилось на всю ширину?

введите сюда описание изображения

введите сюда описание изображения

2

2 ответа 2

3

Насколько я знаю, нельзя заставить видео портить пропорции.
Это можно обойти при помощи css-трансформаций, но надо обновлять скриптом:

~function () {
  var video = document.querySelector('video')

  function handleResize() {
    var w0 = 320, h0 = 240, r0 = w0 / h0
    var w = window.innerWidth, h = window.innerHeight, r = w / h
    
    video.style.transform = r0 < r ? 'scaleX(' + r / r0 + ')' : 'scaleY(' + r0 / r + ')'
  }

  handleResize()
  window.addEventListener('resize', handleResize)
}()
video {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform-origin: center center;
}
<video autoplay loop muted>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<h1>Just some text</h1>

3
  • 3
    Эх.. Бедный сплющенный мишка)))
    – Qwertiy
    11 апр 2017 в 17:47
  • Мда ...................
    – user245150
    12 сен 2017 в 18:16
  • @Duoxx, но работает же. Даже текст выделять можно :)
    – Qwertiy
    12 сен 2017 в 21:06
2

Просто для тега video добавьте стиль

object-fit: cover;

и все будет пропорционально

video {
  position: absolute; /* или fixed */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
}
<video autoplay loop muted>
  <source src="//www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="//www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.