wobsoriano/vue-lite-youtube-embed

About posterURL.... :question:

Closed this issue · 3 comments

Hi! Thanks for this incredibly just in time solution for vue3!

I know it´s not directly related to your code, but...
I´m getting hard time trying to use the poster image as a texture in some 3d library...
It´s fun how something like "tainted canvas error", occurs when trying to create a texture from a img src pointing to external image...
If cors is a problem, why img src opens the image, but I can´t create a texture from it?

Any Light from you? maybe predownload the thumbs before somehow fetching with some download library?

Can you try the solution here? https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported

const img=new Image();
img.crossOrigin="anonymous"

i´ve tried with createelement also before, but any kind of these things gives this:

Access to image at 'https://i.ytimg.com/vi/LqU2XiCaEfo/default.jpg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

As i need to move on, i think i will drop this mistery apart, because img src tag opens ytimg, but not via element/js for creating texture... maybe the best thing i do is to use static thumbs assets for 3D textures

edit: i tried to search about it on google
and went into this

https://stackoverflow.com/questions/43000648/html-img-src-works-but-js-image-loading-cause-cors-error

edit3:

when successfully tries to create the texture, it activates either tainted or cors allow error...
and doesn´t matter if it´s tag or js...

Finally i like to add, that after a research it looks like a webgl restriction :)

edit 4:

actually is not a webgl restriction but a way to work, maybe more secure... i think there´s a way configuring the headers on hosting, i would need to test...

edit 5:
finally studied that it´s a cors security (SOP) that ytimg can impose on JS code running to get those 'resources', makes sense

Thanks for this library!