Product landing page Test suite

hi
i am having a problem with embedding the youtube video on my landing page project.
i copied the embed code from the original landing page. The code i copied to my html embedded the video correctly but The Fork me! FCC test suite template says “Video undefined”.
What does this mean?
i used <iframe></iframe> to embed the code.


 width="560" height="315" name="video" id="video" src= "https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

What exactly does the failing test say?

it just says video not defined.

#video is not defined : expected null to not equal null
AssertionError: #video is not defined : expected null to not equal null

i am trying to pass the User Story #6: I can watch an embedded product video with id="video" .

Does your video have the id set to “video”?

yes. you can confirm from my first post. the codes are written there

Since that is only a partial tag, I can’t assume anything. If you want to share a link to your CodePen, we can look at it. From what you have included, my best guess is that your video tag is either malformed or your id="video" is on the wrong element.

hurray! i finally got it. Apparently my video segment was to have 2 IDs

  1. from user story #5 (When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’)
  2. from user story#6( I can watch an embedded product video with id="video" .)

because of this, i had 2 conflicting IDs on the same iframe tag. So now, i moved the id for user story #5 to another \<div> \\and it worked!
Thank you so much!

Congratulations on figuring it out! Happy coding.

thank you. But i also had another issue. I wanted to fix the position of the nav bar so it would remain static on scrolling.
i wrote:
\.fixed-header{width: 100%; position: fixed;top:0px;left:0px; background-color:white;}\\

but upon scrolling the remaining content end on top of the nav bar instead of below it.
This is the link to my codepen: https://codepen.io/deeyink/pen/jOWZzEM