Access to image blocked by CORS policy

[PaulMartinsen]

In Chrome, I get CORS errors in the console using this plugin:
Access to image at 'https://i.ytimg.com/vi/_2aH3Z7YRZ4/hqdefault.jpg' from origin 'https://www.megunolink.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Maybe YouTube is indicating they don't want their images to be used this way? The thumbnail is present when I scroll the video into view, so I'm a bit unclear whether this is a real problem or not.

As a solution, I added a poster attribute to a hosted image by replacing
this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
with
this.posterUrl = this.getAttribute('poster');
in lite-yt-embed.js

Then the tag becomes:
<lite-youtube videoid="_2aH3Z7YRZ4" poster="https://www.megunolink.com/wp-content/uploads/2020/06/introvideothumbnail.jpg" ></lite-youtube>

[Ahrengot]

I ran into this same issue, but only when running on localhost. The images still loaded for me, but I got that same CORS error in the console.

[PaulMartinsen]

For me, it was on a live site. I don't understand enough about CORS to know if it is an important problem or not. Feel free to close the issue if it isn't worth solving :).

[pavelloz]

Yeah, Lighthouse is pointing it as two separate issues

Console error

Preload image not used warning