Landing page my two web links not working

HTML-CSS
1

Tell us what’s happening:
I am piece mealing my Landing Page to try and fix a few items at a time. Currently I am not able to successfully import my video link or other http link. They show up with a frown/not working. I have googled how to do this, but either cannot find the youtube. embedding/share link or have tried and still doesn’t work. Please help.

Your code so far

Preformatted textor paste code here

https://codepen.io/juligrossman/pen/eYJOrZb
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Hi @juliakajill!

The link you shared is to your tribute page.

3

Oops - here is the correct Landing Page I need help with

https://codepen.io/juligrossman/pen/eYJOrZb

4

Youtube doesn’t allow including the videos on their /watch path(I didn’t remember the word, I meant to say URL path)

To embed a youtube video you can use https://youtube.com/embed?v=<video-link>
You just have to replace watch with embed in the url

More info here and a guide on w3schools

Refer:

1 Like
5

Thank you. That made the frowny face go away and now my box looks like it will play a video but when you click on it an error pops up. This is happening for both of my videos. Not sure if I am missing an “id” class or something like that? Any ideas?

https://codepen.io/juligrossman/pen/eYJOrZb

6

I have edited your post.
You don’t need to place links inside backticks ```. You only need to do that with code.

7

I don’t have much experience with embedding the youtube video.

After going through the w3schools tutorial I mentioned in earlier post, I found that the url scheme for embed videos is https://youtube.com/embed/<video-id>

I’ve tried this type of url on your pen, and it’s working now.

Please note that you’ll use https://youtube.com/embed/<video-id>…
I’ll not edit the previous post as to give other people reference of what was wrong there.
https://youtube.com/watch?v=<-video-id->
https://youtube.com/embed/<-video-id>

Hope it’s all clear :grinning:

8

Hello
I wish I could say it was clear to me and I got it fixed, but I cannot. I changed one of my youtube to embed. I am not sure if I need to end it in <-video-id> or ? I did try both and an error message popped up. Would you be able to try and explain it again? Also I am assuming I still need my "https:// " in the quotation marks?

https://codepen.io/juligrossman/pen/eYJOrZb

9

Hi, I have viewed your codepen, and as it currently stands your <iframe> almost works, first it seems like you closed the opening <iframe> tag too early, resulting in allowfullscreen being alone and sad.

Second your embed url is formatted incorrectly, here is your <iframe> with correctly formatted link, and the extra > removed:
<iframe
 id=“video on making starter”
 height=“300”
 frameborder=“0”
 src= “https://www.youtube.com/embed/dQw4w9WgXcQ” allowfullscreen>
</iframe>

10

Consider the following link
https://youtube.com/embed/dQw4w9WgXcQ

You should reference edit given by @MatchaCrisp.

11

Thank you for your help, I kept looking at your suggestions and ended up going back to youtube. and found the way to embed, then re-copied the .url and it all seems to be working.

12