Product Landing Page - Video

HTML-CSS
1

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

2

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.

3

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

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
5

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

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