Video is not getting loaded getting an error

HTML-CSS
1 
<!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="https://images.everydayhealth.com/images/what-are-natural-skin-care-products-alt-1440x810.jpg" alt="Product Image">
        <h1>Skincare Products</h1>
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#pricing">Pricing</a></li>
                <li><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="features">
        <!-- Your feature section content here -->
        <h2>Features</h2>
        <!-- Add your features content here -->
    </section>
    
    <section id="pricing">
        <!-- Your pricing section content here -->
        <h2>Pricing</h2>
        <!-- Add your pricing content here -->
    </section>
    
    <section id="contact">
        <h2>Contact Us</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <label for="email">Subscribe for Updates:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            <input type="submit" id="submit" value="Submit">
        </form>
    </section>
    
    <section id="video">
        <!-- Embedded product video -->
        
<video controls width="250">
    <source src="https://www.youtube.com/watch?v=H08BdQhJ9wQ&pp=ygUSc2tpbiBjYXJlIHJvdXTEsW5l" type="video/mp4">
</video

    
    <footer>
        <!-- Your footer content here -->
        <p>&copy; 2023 Skincare Products</p>
    </footer>
</body>
</html>



```html
<!-- 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="https://images.everydayhealth.com/images/what-are-natural-skin-care-products-alt-1440x810.jpg" alt="Product Image">
        <h1>Skincare Products</h1>
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#features">Features</a></li>
                <li><a class="nav-link" href="#pricing">Pricing</a></li>
                <li><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <section id="features">
        <!-- Your feature section content here -->
        <h2>Features</h2>
        <!-- Add your features content here -->
    </section>
    
    <section id="pricing">
        <!-- Your pricing section content here -->
        <h2>Pricing</h2>
        <!-- Add your pricing content here -->
    </section>
    
    <section id="contact">
        <h2>Contact Us</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <label for="email">Subscribe for Updates:</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            <input type="submit" id="submit" value="Submit">
        </form>
    </section>
    
    <section id="video">
        <!-- Embedded product video -->
        
<video controls width="250">
    <source src="https://www.youtube.com/watch?v=H08BdQhJ9wQ&pp=ygUSc2tpbiBjYXJlIHJvdXTEsW5l" type="video/mp4">
</video

    
    <footer>
        <!-- Your footer content here -->
        <p>&copy; 2023 Skincare Products</p>
    </footer>
</body>
</html>


```css
/* file: styles.css */
/* Reset some default styles */
body, h1, h2, p {
    margin: 0;
    padding: 0;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
}

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

/* Flexbox layout for #header */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    z-index: 100;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

#header-img {
    max-width: 100%;
    height: auto;
}

#nav-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    margin: 0 10px;
    color: #333;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #ff6347;
}

/* Flexbox layout for sections */
section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    background-color: #ffffff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form styles */
#form {
    margin-top: 20px;
    text-align: center;
}

#email {
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#submit {
    padding: 10px 20px;
    background-color: #ff6347;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

/* Footer styles */
footer {
    text-align: center;
    padding: 20px 0;
    background-color: #333;
    color: #fff;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello!

I found the following when doing a search for how to add the video or iframe.

Adding a video to a webpage using iframe:

< iframe id=“video” src=“https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0” height=“310” width=“510”>< /iframe">

You could try it, and see if it works for your video.

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

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