I’m having a portfolio website (built with Hugo), where I show some of the videos I made. I’m using Plyr as a JS library to run the videos and the URLs are relative to my site’s root. I just checked the pages with subtitled videos in Chrome 85 on Windows 10. I’m getting this error: Unsafe attempt to load URL https://d33wubrfki0l68.cloudfront.net/6b8f97991663bea30f8fc69ff42856609c99df37/16c56/project/goodbye-adam/assets/vid1-sub.vtt from frame with URL https://hrishikeshk.netlify.app/project/goodbye-adam/. Domains, protocols and ports must match.
Apparently, Netlify is changing the subtitle (and video) URLs to the cloudfront ones and Chrome doesn’t let VTTs to load from external addresses. The videos load fine, however, subtitles don’t.
I have asset optimization completely disabled in the build settings for the website.
I had asset optimizations previously enabled and I recently disabled those. Now all my CSS, JS and image relative URLs are not converted to the cloudfront ones, but, I just noticed this VTT problem. I don’t know if this existed before enabling/disabling asset optimization or no.
EDIT: Just checked, the images’ URLs are changed too.
Hi, @hrishikesh. Did you deploy again after changing the settings? Disabling all asset optimization and a new deploy should resolve the issue. If not, would you please send us a link to the site?
Hi @luke, yes, I have deployed the website multiple times after disabling asset optimization. Once normally, next time by clearing cache and after that I had also pushed some changes to my repo, so, that triggered another deploy.
Just to be sure, I just triggered another deploy, but, results are still the same.
The links were there in the OP, but, here you go again:
Long shot, but try renaming one of your video and subtitle files to something else and see if it starts working. if it does, then that just means netlify is unintentionally optimizing it because it already found those files in its asset cache.
Since we can’t get to the bottom of why the assets are getting processed, let’s try a different approach. Set crossorigin="anonymous" on the video tag.
Cloudfront is setting CORS headers so that should likely make it work.
I had tried this while I was trying to host my videos on Dropbox. It had not worked. Still gave a try. Now, the page throws like 42 errors in console as none of the videos load.
This was one reason I moved to host my videos on Netlify itself instead of my previous plan of using Dropbox. But, now, even Netlify is giving the same problem.
I’m running out of ideas just like you at this point. One last thing, I’d try is removing the crossorigin attribute and in the netlify site dashboard, check Disable asset optimization. From the screenshot in OP, it looks like you don’t have it checked.
Yeah, I have my assets on Netlify itself. The link I shared was of a screen recording in which I’m trying to disable asset optimization, but, upon refresh, the setting is like reset.
Oh that is super weird. Maybe try checking everything in that section including Disable asset optimization? That’s how I have it set up for one of my sites and it persists for me.
It did make a difference, however, it turned on all the settings. Just like in the video I sent above, when I click save, it shows optimization id disabled and upon refresh (now) it shows, all of them enabled. Basically, it’s not saving the settings of Disable all optimizations.
Well, that is weird. I think it will work once that option is checked. Maybe someone from the support team would be able to disable it for you. I think that’s your best bet at this point.
It was indeed a problem with Netlify optimizing my assets. I found a Netlify blog post that showed that we could disable optimization through the netlify.toml file.
So, I added this:
[build.processing]
skip_processing = true
to my file and that fixed it! Finally! The dashboard is probably bugged or some weird error was happening. But, this fixed it.
