A .webm video on my website doesn’t work properly – the progress bar fails to seek in Chrome.
After some debugging I found this is due to Cloudflare responding to a range request with 200 instead of 206, which throws a wrench into the video content streaming on Chrome. Interestingly, the same range request works for .mp4 (return 206 => video seeking works):
# Doesn't work: WEBM
curl -I --header "Range: bytes=100-107" 'https://pii-tools.com/wp-content/themes/x-child/video/PII_Tools_Introduction.webm'
HTTP/2 200
date: Thu, 24 Aug 2023 14:58:02 GMT
content-type: video/webm
last-modified: Mon, 19 Jun 2023 09:11:00 GMT
vary: Accept-Encoding
etag: W/"64901ba4-1839071"
cf-cache-status: HIT
age: 844
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=VMNsjO%2Fz%2F5B228bhVY1wLQ51YRNscSa%2FNWyKbRVDxXN8AppQF4CTktYKDpqRgJAz5Rdjb5AP1tFL7Z7puObcmBV5OL3yIJDI2Xm6uyWRGL%2Fk8q8flET%2BB05zLW81zQyjshrWJtLl%2FTGL7DFc"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 7fbc737d29aacf09-SJC
alt-svc: h3=":443"; ma=86400
# Works: MP4
curl -I --header "Range: bytes=100-107" 'https://pii-tools.com/wp-content/themes/x-child/video/PII_Tools_Introduction.mp4'
HTTP/2 206
date: Thu, 24 Aug 2023 14:58:41 GMT
content-type: video/mp4
content-length: 8
last-modified: Mon, 19 Jun 2023 09:12:00 GMT
etag: "64901be0-49f2514"
cf-cache-status: HIT
content-range: bytes 100-107/77538580
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=xqrmuhohbwYJV4LtBl2jGKLVRjqVNyKhOSqNKu3grKHMM%2F94FxfX7rqV7kUCYM6IOFqm42%2F9Asxmv521AGqtY93a%2Fzctp9i70ZlBffGEdXSBIr5jCVzrlwAyGrUnJN9bvdknNUjgP3owaxNy"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 7fbc7471ba299822-SJC
alt-svc: h3=":443"; ma=86400
How do I stop CF from mangling the response to Range requests?
I googled up Fixing MP4 autoplay in Safari and iOS for sites using Cloudflare | Stirtingale which recommends adding a CF page rule to bypass the cache for all *.webm URLs. I did just that, plus cleared the CF cache, but the response is still 200 and video seeking fails. Why does mp4 work and webm doesn’t?