Hi all,

I have a React JS website hosted on an Ubuntu VPS with NGINX as the web server. The videos work fine on most browsers and devices, but I’m facing an issue where they won’t play on any browser on iPhones and iMacs (Safari, Chrome, etc.). This problem seems specific to Apple devices. I'm new to nginx so please help me to solve this issue

Below is my nginx config code:

map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}

server {
listen 80;
server_name 43.225.52.129;

location / {
# Backend nodejs server
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

# Headers for video playback
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Accept-Ranges' 'bytes';
}
}

server {
listen 443 ssl;
server_name 43.225.52.129;

ssl_certificate /etc/letsencrypt/live/orangevideos.in/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/orangevideos.in/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

location / {
# Backend nodejs server
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;

# Headers for video playback
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Accept-Ranges' 'bytes';
}

# MIME types for video files
types {
video/mp4 mp4;
video/webm webm;
video/ogg ogg;
}
}