Incorrect video size on initial load

[devianllert]

What do you want to do with Hls.js?

I'm creating a vertical video player and when i reload page video shows in small size for a moment

https://github.com/user-attachments/assets/78f16486-0118-494a-8d3d-cd09086859d1

What have you tried so far?

Tried to apply styles like aspect-ratio, object-fit, width/height. Video still flashing in small size for a moment Not sure what is happening here. Problem only reproducible on iOS and MacOS (safari).

Does anyone know how to fix it?

[robwalch]

The element resizing shown in the screen capture is a CSS issue, not a bug in HLS.js.

The video element takes on the width and height of the decoded content unless dimensions are styled with CSS.

[devianllert]

At first i also thought that css was the issue but after some investigation i'm not sure. Its happening only with HLS. For example if i use same html and same video but in mp4 format its working correctly and "flashing" is not happening.

Plus there's almost no styling, in the screen capture example i just have an html like this

<div className="container mx-auto w-full h-screen">
  <video className="h-full w-full" autoPlay />
</div>

its just a full screen container with a vertical video. So It seems to me that css is not the issue in this example. Maybe any other ideas or suggestions?

[robwalch]

Multivariant HLS assets can have different resolution variants which cause the media element to resize if not styles to fit a specific layout width or height and aspect ratio.

[devianllert]

In screen capture example i'm not using Multivariant HLS Here's example of m3u8 file if it helps

#EXTM3U
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:2
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:0.999
1.ts
#EXTINF:1
2.ts
#EXTINF:0.9
3.ts
#EXTINF:0.967
4.ts
#EXTINF:0.966
5.ts
#EXTINF:1.166
6.ts
#EXTINF:1
7.ts
#EXTINF:1
8.ts
#EXTINF:1
9.ts
#EXTINF:1
10.ts
#EXTINF:1
11.ts
#EXTINF:1
12.ts
#EXTINF:0.233
13.ts
#EXT-X-ENDLIST

And even if i specify video size via attributes or css it still flashes with smaller variant

[robwalch]

HLS.js is not responsible for rendering. The HTMLMediaElement which is attached to HLS.js does the rendering of media that HLS.js streams. The application providing the HTMLMediaElement is responsible for its styling.

And even if i specify video size via attributes or css it still flashes with smaller variant

Provide an example. Keep in mind that auto margins and min/max-width or height are going to allow the type of scaling shown above that you are trying to avoid.

[devianllert]

I understand that HLS.js is not rendering video itself. But i don't see any other issues with the code and styles. Thank you for trying to help!

Provide an example. Keep in mind that auto margins and min/max-width or height are going to allow the type of scaling shown above that you are trying to avoid.

Here's a screen capture with specified video size and without auto margins, just full-screen container and video.

https://github.com/user-attachments/assets/2ad5e279-4601-4871-a2a0-a3dede8d6d87

[robwalch]

What you are seeing prior to rendering video is the default object size. You need to override that with either the width and height attributes, or CSS that will set the desired pixel width and height prior to rendering video.

https://html.spec.whatwg.org/multipage/media.html#the-video-element

The default object size is a width of 300 CSS pixels and a height of 150 CSS pixels.

[devianllert]

You need to override that with either the width and height attributes, or CSS that will set the desired pixel width and height prior to rendering video.

But i did add width and height via css? You can see it in screen capture when i show video element

[robwalch]

But i did add width and height via css? You can see it in screen capture when i show video element

I do not see a pixel width and height applied to the video element. Provide an example (code or hosted page URL) that reproduces the issue.