Product Landing Page - Video

Tell us what’s happening:

not passing these text I have tried everything

  • You should have a video or iframe element with an id of video.

  • Failed:Your #video should have a src attribute

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
</head>
<body>

    <header id="header">
        <img id="header-img" src="your-logo-image.jpg" alt="Logo">
        <nav id="nav-bar">
            <a href="#features" class="nav-link">Features</a>
            <a href="#pricing" class="nav-link">Pricing</a>
            <a href="#contact" class="nav-link">Contact</a>
        </nav>
    </header>

<section id="video">
    <video id="video" width="560" height="315" controls>
        <source id="video" src="your-video-source.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</section>


    <section id="features">
        <h2>Features</h2>
    </section>

    <section id="pricing">
        <h2>Pricing</h2>
    </section>

    <section id="contact">
        <h2>Contact Us</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            <input type="submit" id="submit" value="Submit">
        </form>
    </section>

</body>
</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header-img {
    width: 100px;
}

#nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #333;
}

.nav-link {
    text-decoration: none;
    color: #fff;
    padding: 10px;
}

#video {
    width: 100%; /* Adjust the width based on your preference */
    height: 400px; /* Adjust the height based on your preference */
}

#form {
    text-align: center;
    margin-top: 20px;
}

#email {
    padding: 10px;
    margin: 10px;
    width: 300px;
}

#submit {
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

#submit:hover {
    background-color: #555;
}


@media screen and (max-width: 768px) {
    /* Add responsive styles here */
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

You have two elements with the id of video. Id’s need to be unique on the page. Two elements can’t have the same id. Fix this and you will pass these tests.

this having same issuse with this code


<section id="video">
    <video width="560" height="315" controls>
        <source src="your-video-source.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</section>

Well, you removed the id from the video element, but isn’t that the element that is required to have an id of video?

2 Likes

found the solution thanks for the help

 <section id="video-section">
        <iframe id="video" src="https://www.youtube.com/embed/yourvideoid" frameborder="0" allowfullscreen></iframe>
    </section>