A: Hello Martin,

In a nutshell, when you let the TwicPics Script handle your video HTML element (or if you use our React, VueJS or Svelte components), all you have to do is to correctly handle responsiveness using CSS. So, for instance, having the video element be 1000x800 on desktop (large screen) and 300x500 on mobile (small screen).

TwicPics will detect the size of the video element as per your CSS. Additionally, it will determine the DPR of the user's screen and which codec the user's browser should receive (H264, H265 or VP9). Then it will request a video file with the best resolution and format accordingly. It also takes into account the CSS object-fit property of the video element so as to differentiate between cover and contain modes.

Also, videos will be lazy-loaded out of the box. That is you won't see a video downloaded nor played unless it is in view.

Additionally, you can easily generate a blurry preview or a static image poster using the first frame of the video.

You can find more information here: https://www.twicpics.com/docs/topics/video-optimization

Note that, for hero videos (that take the entirety of the screen), we recommend adding the intrinsic dimension of the video and a bigger sizing step in order to limit the number of variants generated and optimize CDN caching as per this page: https://www.twicpics.com/docs/guides/handling-lcp-videos

You need to have a modicum of understanding of HTML and CSS to implement this and to be in an environment that allows for HTML/CSS editing.

Please note that we have a very specific use case for our video optimization: web page integrated short videos, looping and auto-playing. In short, animated visuals that can be used in place of a static image.

Limits for you master video are 36MB if memory serves, 36 million pixels in resolution and 900 frames-long (i.e. 30s at 30fps though we recommend 24fps for the web, it's plenty enough).

Hope this helps!

Julian