How to get Video Preview?

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:

You need to do share->embeds to get the link to use to have the video inside your page

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.