I have a video issue in my Next.js project. Specifically, when I navigate to my website from my Instagram page, the Cloudinary video doesn’t load. I’ve noticed this issue occurs only on iOS mobile devices.
const url = getCldVideoUrl(
{
width: 1920,
height: 1080,
src: 'https://res.cloudinary.com/CLOUD_NAME/VIDEO_SRC.mp4',
quality: 'auto',
},
{
cloud: {
cloudName: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
apiKey: process.env.CLOUDINARY_API,
apiSecret: process.env.CLOUDINARY_API_SECRET,
},
},
);
return <video
src={url}
autoPlay
loop
muted
playsInline
controls={false}
className="absolute inset-0 size-full object-cover"
>
Your browser does not support the video tag.
</video>
Can someone please explain what the potential problems might be? Is it related to CORS or something else?