Build a Product Landing Page Embed video error

Help! Nothing is working. I’m unable to embed video:
html5

               <div class=iframe-container">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/1cYgMQSSUaw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  

css3

  .iframe-container {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%; 
     height: 0;
}
.iframe-container iframe{
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
}

I keep getting this message after trying mutiple methods of embedding…

error message 13 6. I can watch an embedded product video with id=“video”.

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

one of many video instructions I followed

Your code so far

**Your browhttps://codepen.io/diane-nelson-trotter/pen/zQzPJZ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.
https://codepen.io/diane-nelson-trotter/pen/zQzPJZ
Link to the challenge:

If I add the appropriate id to an element other than the relevant one, I get a very similar error.

From the test error message I get…

I can watch an embedded product video with id="video".
#video should be an <iframe> or <video> element 

This tells you exactly what’s missing.

I’m sorry. I thought this was for video’s other than Youtube.

  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>```

I can watch an embedded product video with id=“video”.!! yups! go

I added id=video but no success
https://codepen.io/diane-nelson-trotter/pen/JqrZdB

  <div class=video-container">                                  
  <section id="video">
                     <iframe width="560 " height="315 " src="https://www.youtube.com/embed/1cYgMQSSUaw " frameborder="0 " allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture " allowfullscreen></iframe>                                                                      </section>                  
 
              </div>   

Move the id="video" from the section element to the iframe element.

1 Like

For the last test, you can add what you have on the nav to the header as well. But you have a lot of errors in the CSS you will need to fix some of them first.

  1. You have a style element (<style>) in the CSS at line 29

  2. Head is not a valid element selector line 30

  3. This is not a CSS comment <!--add for flex--> at line 41 (/* this is a CSS comment */)

  4. The body selector block is not closed correctly.

  5. You have invalid syntax for the background image

background-image: url (https://www.dropbox.com/s/hf2mw1i3fcrap3e/LittleRockcropped.jpg?dl=1
        alt=Little Rock);

Should be:

background-image: url(https://www.dropbox.com/s/hf2mw1i3fcrap3e/LittleRockcropped.jpg);

If you replace the CSS for the three selectors below with this it should pass the last test.

body {
  width: 100%;
  height: 300px;
  background-image: url(https://www.dropbox.com/s/hf2mw1i3fcrap3e/LittleRockcropped.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
  background-color: dodgerblue;
  margin: 0px 50px 50px;
}

h2 {
  text-align: center;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
  1. Use the down arrow on the CSS code box and from the menu click “Analyze CSS”, fix any errors.

Your a boss. The solution was so simple, Thanks a lot.