I have this page in a Next.js site:
https://sendmade-portal-vercel.vercel.app/hu/product/repityke-origami-penztarca
You can feel video loads slowly.
This is how video element is used:
<video
width="100%"
autoPlay
muted
loop
playsInline
style={{
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: -1,
}}
>
<source
src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props.urlPrefix}-intro.mp4`}
type="video/mp4"
/>
</video>
Video is H.264 encoded, and has a 3840 × 2160 resolution. Shall I reduce the resolutiion? Would it help? Do you have any other idea? Said that Next.js does not have video optimization as there is image optimization.