Landing Page viewport and embed video

HTML-CSS
1

I have tried everything I can find including trying code from other projects and reading HTML5 and CSS3 for Dummies.
Error

6. I can watch an embedded product video with id=“video”.#video is not defined : expected null to not equal null

my code

 <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>

Viewport error
The view port: #header or one of its children should be at the top of the viewport : expected 39.984375 to be close to 0 +/- 15

from Dummies I added:

  @mediaquery (max-width: 600px) {
  /*special instructions for narrower screens*/
  #all {
    display: block;
    width: 90%;
    font-size: 125%;
  }
  Nav {
    display: block;
    width: 100%;
    height: auto;
  }
  #content {
    display: block;
    width: 95%;
    height: auto;
    padding-left: 5%;
  }
  Footer {
    display: block;
    width: 100%;
  }
}

Your browser information:
Google Chrome
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36.

**Link to the challenge:**https://codepen.io/diane-nelson-trotter/pen/JqrZdB
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

2

There are many “ways” to embed a video and I believe I’ve tried them all. I am not able to embed for some reason. This is straight from w3schools:

Your code so far

<div class=iframe-container " id=video>                                                 
<embed width="420 " height="315 "
src="https://www.youtube.com/v/1cYgMQSSUaw ">
        </div>```

This method came from https://www.w3schools.com/html/html_youtube.asp 




**Your browser information:**
my page:  https://codepen.io/diane-nelson-trotter/pen/zQzPJZ  
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36</code>.

**Link to the challenge:**
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
3

If you click on share from the video you want to embed, and click the embed option, you will be provided with code YouTube wants you to use for this.

The section of the page you mentioned that has the “embed” tag also says its deprecated, as in no longer maintained, likely will not work.

side note

place your tipple backticks before and after the code on separate lines.

4

Thank you Mark! I fixed it but still nothing good happening. All I’m lacking is the embedded video and viewport and I just can’t figure them out.