Video preview + Removing border

Hello,

In this challenge, I tried replicating the sample and while my code passes, I’m confused about two things I was unable to get right.

  1. How can I embed the video so that a preview is visible? And why isn’t my video playing?

  2. When I scroll, there is a slight gap above the header. How do I remove it?

Your code so far

<!DOCTYPE html>
<html>
  <head>
    <title>Product Landing Page</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=divice-width, initial scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css"/>
  </head>
  <body>
    <header id="header">
       <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo" id="header-img"/> 
        <nav id="nav-bar">
          <ul>
            <li><a href="#features" class="nav-link">Features</a></li>
            <li><a class="nav-link" href="#form">How it works</a></li>
            <li><a class="nav-link" href="#pricing">Pricing</a></li>
          </ul>
        </nav>
      </header>
    <main>
      <section class="form">
        <h2>Handcrafted, home-made masterpieces</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
        <input id="email" name="email" type="email" required placeholder="Enter your email address" class="email"/></br>
        <input type="submit" id="submit" value="GET STARTED"/>
        </form>
      </section>
      <section id="features" class="features">
        <i class="fa-solid fa-fire-flame-curved icon"></i></i><article class="f-one"><h3>Premium Materials</h3>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></article>
        <i class="fa-solid fa-truck icon"></i><article class="f-two"><h3>Fast Shipping</h3>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p></article>
        <i class="fa-solid fa-battery-full icon"></i><article class="f-three"><h3>Quality Assurance</h3>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p></article></section>

    <section>    
      <video controls src="https://youtu.be/y8Yv4pnO7qc" type="video/mp4" preload="auto" id="video" autoplay></video>
      </section>
      <section id="pricing">

        <article class="price-card-1">
        <h4>TENOR TROMBONE</h4>
        <p>$600</p>
        <button class="price-button">SELECT</button>
        </article>

        <article class="price-card-2">
        <h4>BASS TROMBONE</h4>
        <p>$900</p>
        <button class="price-button">SELECT</button>
        </article>

        <article class="price-card-3">
        <h4 class=>VALVE TROMBONE</h4>
        <p>$1200</p>
        <button class="price-button">SELECT</button>
        </article>

      </section>
      <footer class="footer">
        <p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Privacy</a></p>
        <p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Terms</a></p>
        <p class="link"><a href="https://product-landing-page.freecodecamp.rocks/#">Contact</a></p>
        <p class="copy">Copyright 2016, Original Trombones</p>
      </footer>
    </main>
    
  </body>
</html>

html {box-sizing: border-box;
background-color: #eee}

body {font-family: Verdana, Tahoma}

main {margin: 0 200px}

header {display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 40px 10px 40px;
background-color: #eee;
position: sticky;
top: 10px}

#header-img {width: 300px;
Height: 34px;
}

nav ul {list-style: none;
display: flex;
justify-content: space-evenly;
}

nav ul li {display: flex;
justify-content: space-evenly;
margin-left: 90px;}

#nav-bar a {text-decoration: none;
color: black}

h2 {text-align: center}

form {text-align: center}

.email {margin-bottom: 15px;
width: 280px;
height: 28px}

#submit {border: none;
background-color: #FAC213;
font-weight: 900;
font-size: 16;
padding: 6px;
transition: background-color 1s;}

#submit:hover, .price-button:hover {cursor: pointer;
background-color: orange;}

.features {margin-top: 100px;
margin-bottom: 50px;
display: grid;
grid-template-columns: 100px auto;
gap: 20px}

.icon {color: darkorange;
font-size: 50px;
grid-column: 1;
align-items: top
margin: 0}

.features p {grid-column: 2/-1;
margin-top: 4px;
margin-bottom: 40px;
align-items: center;
margin-left: 0}

h3 {margin-bottom: 0;
margin-top: 0}

video {display: block; 
margin: auto;
width: 60%}

#pricing {display: flex;
justify-content: space-evenly;
text-align: center;
margin-top: 60px}

.price-card-1, .price-card-2, .price-card-3 {border: 1px solid black;
border-radius: 2px}

h4 {background-color: lightgrey;
padding: 5px 35px;
margin: 0;
display: block;
font-weight: 550;}

p{margin: 10px}

.price-button {border: none;
background-color: #FAC213;
font-size: 16;
padding: 6px;
margin-bottom: 10px;
transition: background-color 1s}

footer a {text-decoration: none;
color: black;
}

footer {display: block;
background-color: lightgrey;
margin-top: 50px;
text-align: right;
padding: 10px}

.link {display: inline-block;
margin-bottom: 3px}

.copy {display: block;
color: grey;
font-weight: 200;
font-size: 13;
margin-top: 3px}

@media only screen and (max-width: 800px) {

nav ul li {margin-left: 20px;}

header {
padding: 10px 20px 10px 20px}

main {margin: 0 60px}

@media only screen and (max-width: 600px) {

header {
padding: 0px;
max-width: 90%}

#header-img {width: 200px;
Height: auto;
margin: 0;
}
  
  main {margin: 0 30px }
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge: