html5 video ширина ролика

463
26 ноября 2016, 18:49

каким образом можно растянуть html5 видео? оно сохраняет пропорции. видел вариант с

-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);

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

Answer 1

Можно как-то так попробовать

.wrapper-video { 
  display: block; 
  max-width: 500px; 
  width: 100%; 
  border: 1px solid #000; 
  height: auto; 
} 
.wrapper-video video { 
  width: 100%; 
  height: auto; 
}
<div class="wrapper-video"> 
  <video controls="controls"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4"/> 
  </video> 
</div>

Answer 2

Смотря как вы добавляете видео простои пример:

<iframe width="560" height="315" src="https://www.youtube.com/embed/N7nM0S_IJ6g" frameborder="0" allowfullscreen></iframe>

Ширина

width="560"

Высота

height="315" 

если вы добавляете в html 5 то вот отдельный пример

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Соотвецтвенно нужно добавить код с видео в конкретный класс которому тоже можете дать и ширину и высоту

P.S. советую пробежатся здесь

READ ALSO
Верстка: main и aside во всю высоту страницы

Верстка: main и aside во всю высоту страницы

Подскажите, как растянуть блоки на всю высоту страницы?

558
Bootstrap Carousel

Bootstrap Carousel

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

482
Увеличить поле text в форме html

Увеличить поле text в форме html

Добрый деньНе могу понять почему не работает

388
При нажатии появляется блок

При нажатии появляется блок

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

479