Вставить видео без controls и полей?

Question

[Андрей Филимонов]

Хочется оставить на сайте короткие, движущиеся и зацикленные видео, сейчас это сделано гифками, но они много весят, нужно переделать под видео, но как? Нужно, чтобы не было как на скрине 1:



А получается только как на скрине 2, с полями и элементами управления. Если убрать controls, то видео становится просто картинкой, если добавлять width="640" height="360" то оно вылезает за блок. Как сделать, чтобы выглядело гифкой, но было видео файлом?

Answer 1

[Алекс Глебов]

<div class="video">
  <video  loop muted autoplay src="http://thenewcode.com/assets/videos/polina.mp4"></video>
</div>

.video {
    width: 100%;
    padding-bottom: 67%;
    position: relative;
}
.video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
https://developer.mozilla.org/ru/docs/Web/CSS/obje...

Comments

[Андрей Филимонов]

Очень благодарю, то что нужно. Только Google Page Speed понизил оценку за это, хотя на пару мегабайт легче сделал страницу. Почему так?

[Алекс Глебов]

Андрей Филимонов, очень тяжелая страница при простом функционале.
Сотня js файлов. Отсеивайте лишнее и склеивайте в один. (или 2 - либы и свой код)
Карты, аналитику и прочий сторонний код добавляйте после полной загрузки страницы.
Общий вес главной 44мб. Уменьшайте до 4 максимум.

Видео можно сделать через lazy-load или грузить и воспроизводить по ховеру, но это после оптимизации js.
https://web.dev/lazy-loading-video/
https://developer.mozilla.org/ru/docs/Web/Performa...