Почему HTML5 Video перед инициализацией источника неправильно масштабируется?

Question

[lexchz]

Например, вставляю видео в таком виде:

<video src="https://www.w3schools.com/html/mov_bbb.mp4" width="640" height="352"></video>

CSS-код:

video {
    max-width: 100%;
    height: auto;
}

Проблема в том, что ДО загрузки видео из источника, блок видео имеет соотношение сторон 2/1, игнорируя соотношение, заданное в атрубутах width и height. Таким образом, происходит прыганье контента при загрузке страницы, что очень плохо в эстетическом плане.

Как-нибудь можно решить эту проблему, не прописывая инлайн-стиль aspect-ratio для каждого видео? Предполагается, что каждое видео имеет разное соотношение сторон, и фиксированные блоки с возможными полями не нужны.

Comments

[Сергей delphinpro]

а как браузер должен узнать соотношение?

[lexchz]

Сергей delphinpro, в теге img браузер берет соотношение из атрибутов width и height, и только после загрузки картинки начинает игнорировать height (т.к. она задана в CSS). С тегом video аналогичный приём не работает почему-то.

[Сергей delphinpro]

lexchz, действительно, поведение разное.

Но что вам мешает прописывать aspect-ratio наравне с шириной и высотой? Вы же все равно пишете размеры, допишите и соотношение

<video src="https://www.w3schools.com/html/mov_bbb.mp4"
  width="640"
  height="352"
  style="aspect-ratio: 640 / 352"
></video>

[Сергей delphinpro]

а, я понял, почему... ну хз тогда..

[lexchz]

Сергей delphinpro, ничего не мешает, но инлайн-стили использовать в html как-то не очень красиво. И к тому же свойство aspect-ratio совсем недавно стало поддерживаться браузерами, выходит, что проблема раньше вообще нерешаема была.

[Сергей delphinpro]

lexchz,

но инлайн-стили использовать в html как-то не очень красиво.

Это заблуждение.
Не красиво писать в инлайн то, что должно быть в css. А то, что в css быть не может по каким-то критериям - нормально писать в инлайн.
Часто используют кастомные свойства в инлайне. Свойство background-image - это почти классика. И т.п.

[lexchz]

Сергей delphinpro, в общем, я так понял, что причина в том, что video изначально имеет ширину 300 и высоту 150 px, и до получения браузером инфы об источнике именно так и масшатабируется, а картинка по умолчанию никаких размеров не имеет.