Pages: open graph video not working

I’m declaring an open graph video by pointing the og:video property to some static mp4. Most platforms don’t show the video when previewing the link, while they did with my previous hosting provider. I suspect it’s because of the way Cloudflare Pages serves the mp4. For example, typing the url to the mp4 on Cloudflare Pages into a browser immediately downloads the file – with my previous hosting provider, the file was shown inline.

Headers of previous hosting provider:

HTTP/1.1 200 OK
Date: Thu, 26 May 2022 23:22:59 GMT
Content-Type: video/mp4
Content-Length: 489808
Connection: keep-alive
Server: Apache
Last-Modified: Thu, 26 May 2022 18:28:51 GMT
ETag: "77950-5dfee5c9264a2"
Accept-Ranges: bytes

Cloudflare Pages:

HTTP/2 200
date: Thu, 26 May 2022 23:22:16 GMT
content-type: application/octet-stream
access-control-allow-origin: *
cache-control: public, max-age=0, must-revalidate
etag: "e18e6a807fbbb14f294bef4b74a5bbac"
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=pUq1Ww7ICOfms%2BgU%2FCSMdK7bAdLDvOIC5zdl1DDICORXwHTcTrRnVjmKAdJXO5j3gqOL7eYFIxwfPOPxil%2BPd7wLg6GeTe6ol5qAUVKgXauoTftc1143E85GPhdd2VHGTizTQ3sGTw%3D%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 711a407b6d9e9158-FRA
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

Whilst that Content-Type isn’t ‘correct’ for a .mp4 file, you should be able to use the _headers file to apply Content-Disposition: inline on the directory that has your media assets to make them be displayed in the browser (inline) as opposed to downloaded (attachment).

Since that header isn’t being sent, and the content-type is incorrect, the browser seems to be defaulting to attachment since that is what is usually used for application/octet-stream.

https://developers.cloudflare.com/pages/platform/headers/

3 Likes

Content-Disposition: inline still has the browser downloading the file. I’ve tried overriding the Content-Type to video/mp4, which did make the browser show the file inline. Neither got the video preview to work.

It’s now working with Content-Type: video/mp4 and Content-Disposition unset. I suspect it was due to some cache-related issue.