Fashion Blog: Adding a youtube video

Hello Everyone,

I’ve been taking the time to play around with the “New York Fashion Blog” project. My goal is to add a youtube video to the page but I’m having some trouble; my text editor (VS Code) wont let me preview the youtube video so I’m not sure what I’m doing wrong.

I’m blatantly copying and pasting the embedded html text from youtube but it just wont work. If anyone could help me out with this I would greatly appreciate it.

here is the html text that I’m pasting into vs code:

<iframe width="320" height="250" src="https://www.youtube.com/embed/m1uxbP9-uX0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Hey @enriquegomez43830661!

I’m confused as to what problem you are having… I ran the code you provided and I got a youtube video implanted on the page. Would you mind expanding on the trouble you are having?

Hey @stevencopeland

Thanks for your willingness to help me out. I tried to paste the above text into vs code but when I try to run it I receive the following error message on my preview screen.

That may be because your browser does not support HTML5 video. What browser are you in?

I’m using google chrome

Interesting. What version?

I just checked and it’s the newest version

huh. Go to jsbin.com, and enter the code in there… Does it work there?

Yep, it works…but for some reason it still won’t let me view it on my text editor’s preview screen. Do you think that theres an issue with Visual Studio Code?

Is this issue just in VSC or in your browser as well?

If it is only in VSC then yup, I would say this is an issue with VSC.

This only happens with VSC, my internet browser is working properly. Have you talked to anyone else that has dealt with a similar problem?

No, I haven’t seen this problem before… but it shouldn’t be too big of a problem right? Because you can just view it in your browser window.

For the most part it looks like I can, I was scouring forums over the web and it looks like other people have complained about the same thing. This may be something that VS code is trying to work out.

Nonetheless, thank you so much for taking the time to try and help me out. I greatly appreciate it!!

1 Like

hi @enriquegomez43830661
I tried your code in Sublime text and it gave the output .

your code:

<!Doctype html>
<body>
	<iframe width="320" height="250" src="https://www.youtube.com/embed/m1uxbP9-uX0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</body>
</html>

output:
PNG

Your code is correct! :smiley: :smile:

This iframe tag is new to me. Using this tag and copy and pasting the entire tag, it is working on my Chrome browser. But when I changes the Video link to another video it is not working. This is really strange.

It is also not working on JS Bin - Collaborative JavaScript Debugging

The Page shows " www.youtube.com refused to connect." Please assist @mtf

Better to get it from the horse’s mouth and check with YT how to embed. Is an iframe really necessary?

I tried using the video element and the page rendered showed an empty space. Both in Codecademy environment and Chrome & Mozilla

Have you found and read the YouTube.com guidelines for embedding video in your pages?

NO :zipper_mouth_face: :zipper_mouth_face:
So it does not even allow to write the code in Subline and then test it offline?

The guidelines are meant to help. Read them, and see if doors open.