Proyectos de diseño web responsivo - Construye una página de inicio de producto

Cuéntanos qué está pasando:
Me pide que tenga un (iframe) o un (video) con id de video y ya lo tengo, tambien tengo el atributo (src). no sé que más hacer.

sé que todavia me falta (@media) pero quiero resolver el problema de video primero.

aqui esta el codigo:

    <iframe
      src="frog.mp4"
      id="video"
      frameborder="0"
      width="450px"
      height="300px"
    ></iframe>

Tu código hasta el momento

ADVERTENCIA

El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.

Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.

Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Proyecto 3</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <div class="logo">
          <img
            src="https://img.icons8.com/clouds/512/cute-youtube.png"
            alt="logo"
            id="header-img"
          />
        </div>

        <div class="links">
          <a href="#inicio" class="nav-link">Inicio</a>
          <a href="#video" class="nav-link">Video</a>
          <a href="#precios" class="nav-link">Precios</a>
        </div>
      </nav>
    </header>
    <section class="section-top" id="inicio">
      <div class="h2-top"><h2>Para recibir notificaciones</h2></div>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input
          type="email"
          name="email"
          id="email"
          placeholder="Enter your email address"
        />
        <button class="submit" type="submit">
          <input type="submit" id="submit" />
        </button>
      </form>
    </section>
    <section class="section-body">
      <div class="sub-container">
        <div class="sub-sub-container">
          <img
            src="https://img.icons8.com/ios/512/laptop-play-video.png"
            alt="icono"
          />

          <div class="texto-container">
            <h2>Los mejores videos con las mejores calidades</h2>
            <p>
              contamos con una gran cantidad de contenido, en los cuales puedes
              pasar muchos momentos de diversión con tus Youtubers favoritos.
            </p>
          </div>
        </div>
        <div class="sub-sub-container">
          <img
            src="https://img.icons8.com/ios/512/laptop-play-video.png"
            alt="icono"
          />

          <div class="texto-container">
            <h2>Los mejores videos con las mejores calidades</h2>
            <p>
              contamos con una gran cantidad de contenido, en los cuales puedes
              pasar muchos momentos de diversión con tus Youtubers favoritos.
            </p>
          </div>
        </div>
        <div class="sub-sub-container">
          <img
            src="https://img.icons8.com/ios/512/laptop-play-video.png"
            alt="icono"
          />

          <div class="texto-container">
            <h2>Los mejores videos con las mejores calidades</h2>
            <p>
              contamos con una gran cantidad de contenido, en los cuales puedes
              pasar muchos momentos de diversión con tus Youtubers favoritos.
            </p>
          </div>
        </div>
      </div>
    </section>
    <section class="video" id="video">
      <div class="video-container">
        <div class="hr" id="video"><hr class="div" /></div>
        <h3>Video</h3>

        <iframe
          src="frog.mp4"
          id="video"
          frameborder="0"
          width="450px"
          height="300px"
        ></iframe>
      </div>
    </section>
    <section class="precios">
      <div class="hr" id="precios"><hr /></div>
      <div class="caja-title"><h2>Planes de pago</h2></div>
      <div class="precio-container">
        <div class="caja-fuera">
          <div class="caja-top"><p>Fan</p></div>
          <div class="precio-centro">
            <h2 class="h2-precio">$200</h2>
            <p>
              Esto es un contenido que dice los beneficios del plan que eliges
              pagar
            </p>
          </div>
          <div class="button-select">
            <button>Select</button>
          </div>
        </div>
        <div class="caja-fuera">
          <div class="caja-top"><p>Super Fan</p></div>
          <div class="precio-centro">
            <h2 class="h2-precio">$700</h2>
            <p>
              Esto es un contenido que dice los beneficios del plan que eliges
              pagar
            </p>
          </div>
          <div class="button-select">
            <button>Select</button>
          </div>
        </div>
        <div class="caja-fuera">
          <div class="caja-top"><p>Ultra Fan</p></div>
          <div class="precio-centro">
            <h2 class="h2-precio">$1200</h2>
            <p>
              Esto es un contenido que dice los beneficios del plan que eliges
              pagar
            </p>
          </div>
          <div class="button-select">
            <button>Select</button>
          </div>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="icons">
        <img
          src="https://img.icons8.com/color/192/facebook-new.png"
          alt="facebook"
        />
        <img
          src="https://img.icons8.com/fluency/512/twitter-circled.png"
          alt="twitter"
        />
        <img
          src="https://img.icons8.com/color/512/linkedin-circled.png"
          alt="Linkedin"
        />
      </div>
      <div class="copyright">
        <span>&copy; Copyright</span>
        <span>Jesus Casado 2022</span>
      </div>
    </footer>
  </body>
</html>

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Desafío: Proyectos de diseño web responsivo - Construye una página de inicio de producto

Enlaza al desafío:

1 Like

Hola, @Jesus_901

He probado con este vídeo de Wikipedia, se reproduce perfectamente, pero no pasa el test, así que el problema es otro.

<video 
id="video" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a7/How_to_make_video.webm/How_to_make_video.webm.720p.vp9.webm" 
controls 
width="100%">
</video>

Siento no haber podido ayudar. Podrías revisar tú código HTML por si acaso en un editor tipo Visual Studio Code por si tienes algún error sintáctico.

Saludos y suerte

En lo cierto esta usted caballero, el problema era que tenia otro elemento antes que el video con el id (video) por eso no lo reconocia.