Embedding a YouTube Video in Glitch Project

Hi,

I’m new to glitch, but I’m trying to embed a YouTube video into my glitch project, and I’m having some issues. What’s the best way to do this?

You’re not alone in having issues… so let’s start at the beginning since there are no clues.

Did you try restarting your computer?

Hi @dkw, welcome!

If you go to YouTube, choose Share, then Embed, you get some HTML that looks like this:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/kfVsfOSbJY0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

If you put this into the HTML of a Glitch page (like index.html on a remix of glitch-hello-website) it should work just fine.

Let us know if you have some specific problem and the community will see what we can do! :slight_smile:

3 Likes

Thanks for getting back to me @SteGriff!

So, what I’m trying to do is to create a glitch project of a location by using VR glasses to look around. It’s for historical purposes.

The goal of the video is to tell the story of the location that’s being presented.

Here’s a link of my code: Glitch :・゚✧

Would you confirm what the issue is? It isn’t playing I suppose?

As far as I can tell it is a limitation of WebGL. See: FAQ – A-Frame

" There is no way for the browser to display <iframe> s within WebGL."

This project is similar in principal to yours I think GitHub - etiennepinchon/aframe-videoplayer: A video player made with A-Frame but note that he doesn’t appear to be playing a Youtube video but rather a video located on the server. That may be a solution for you as well.

And if you implement the above, it’s possible to download the YouTube video and host it.

There is always a way to download a YouTube video. It would be a question of having permission to do so which could be investigated. Embedding a YouTube player isn’t an issue but he original posting hoped to do it in A-Frame.

If it were my project I would check with a support group that specializes in A-Frame development.

Yea one workaround you could use is to overlay the youtube video with the same transformations (rotation, scaling, positoning/translation) using css 3D
example:
https://threejs.org/examples/css3d_youtube.html