Retrieving YouTube video URL in JavaScript

Question

I am currently trying to build a audio visualizer in HTML/JS using WebGL. I'm so far using an Audio Element for this, which I spawn, create the analyser, connect to output, etc. I can already drag and drop files and enter a url, but I'd like more... for example YouTube integration (enter a link and it just plays it).

Here comes the difficult part however: Despite YouTube constantly updating I've found this method: How to get direct url for youtube videos

so I am loading an Iframe with the embedded video (because YT doesnt allow their Desktop side loaded in iframes....) and accessing frame.contentWindow - which doesnt work due to the same-origin policy ... -__-

I was just trying to improve my site a little and all the "security" features are starting to get on my nerves. Is there at current a way to do this in plain javascript & html? Additionally php for some backend-stuff WOULD be ok if not avoidable.

Thanks in advance.

Answer 1

Try putting https://cors-anywhere.herokuapp.com/ in front of the url. Type the entire URL afterwards, including the http://www.. This is a heroku web app that makes the request for you and should avoid the cross-origin request error.

Are you getting the cross-origin error when your code is hosted on a server? In my experience, this error usually happens when code is being executed on the desktop but disappears when the file is hosted on a server.

Looking at all of the answers for this question may also be beneficial.

Here's a github respository that looks very similar to what you want to make. Might be worth taking a look at.