problème intégration Vidéo youtube par HassanAboo - page 1

Bonjour,

Je cherche à intégrer une vidéo youtube sur mon premier site web que j'essaye de développer ( je suis un grand débutant ).

Je code sur Codepen parce que j'ai un problème avec xamp ou je n'arrive pas à lier mes pages html / css ( c'est un autre sujet )

Problème : lorsque je met le code en gras , tout le site (mit à part le header est masquée ou ne s'affiche pas , il n'y a plus rien ). Alors que quand je l'enlève tout reviens normal .

Des idées concernant la source du problème ?

<body>
        <header role="header">
          <nav class="menu" role="navigation">
                      <div class="inner">
                          <div class="m-top">
                              <h1 class="logo"><img src="../img/logo.png" alt="Logo" class="logo"></h1>
                          </div>
                          <div class="m-bas">
                            <li><a href="#">Accueil</a></li>
                            <li><a href="#">Nos Voitures</a></li>
                            <li><a href="#">Tarifs</a></li>
                            <li> <a href="#">Réservation</a></li> 
                      </div>
                  </nav>
         </header>   
         <section class="hero"> <iframe width="100%" height="100" src="https://www.youtube.com/embed/0AcvHuGeOZE" title="YouTube video player" frameborder="10"allowfullscreen </iframe>
           <h1>NSCAR</h1>
           <a href="http://ledesignerduweb.fr/" class="btn">Réserver</a>
         </section>
       
         <section id="content">
          <div class="leftbox">
            
          </div>
          <div class="rightbox">
            <h1> NSCAR EXPERT DE LA LOCATION AUTOMOBILE</h1>
          </div>
          </section>
          
         
      
         <section class="features">
              <h3 class="title">Features and services</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
              <hr>
      
              <ul class="grid">
                  <li>
                      <i class="fa fa-camera-retro"></i>
                      <h4>Photography</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.</p>
                  </li>
                  <li>
                      <i class="fa fa-cubes"></i>
                      <h4>Web Development</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.</p>
                  </li>
                  <li>
                      <i class="fa fa-newspaper-o"></i>
                      <h4>Content Editing</h4>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices vitae pulvinar velit.</p>
                  </li>
              </ul>
          </section>
      
      
          <section class="reviews">
              <h3 class="title">What others say:</h3>
      
              <p class="quote">Mauris sit amet mauris a arcu eleifend ultricies eget ut dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              <p class="author">— Patrick Farrell</p>
      
              <p class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
              <p class="author">— George Smith</p>
      
              <p class="quote">Donec commodo dolor augue, vitae faucibus tortor tincidunt in. Aliquam vitae leo quis mi pulvinar ornare. Integer eu iaculis metus.</p>
              <p class="author">— Kevin Blake</p>
      
              
          </section>
      
      
          <section class="contact">
              <h3 class="title">Join our newsletter</h3>	
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id felis et ipsum bibendum ultrices. Morbi vitae pulvinar velit. Sed aliquam dictum sapien, id sagittis augue malesuada eu.</p>
              <hr>
      
              <form>
                  <input type="email" placeholder="Email">
                  <a href="#" class="btn">Subscribe now</a>
              </form>
          </section>
      
      
      </body>

le code CSS:

.menu{
    width: 100%;
    height: 100px;
    line-height: 66x;
    background-color: red;
    text-align: center
}

.logo{
    margin: 0;padding: 0;
    text-align: center;
}

html, body{
    margin: 0;
    padding: 0;
    font-family: "Lato";

}

.inner{
    width: 80%; 
    margin: auto;
}

.m-bas{
  padding: 0;
  margin: 40px;
  display:flex;
  justify-content:center;
  
}

li{
  list-style:none;
  margin: 0 20px;
}

@media (max-width: 1000px){

	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){

	section{
		padding: 80px 30px;
	}

}

.hero{
  text-align:center
}


section#content div.leftbox{
  display: inline-block;
  width:50%;
}
section#content div.leftbox{
  
}

section#content div.rightbox{
  
}

Je suis preneurs de tout avis ou piste ^^

Bonne journée

HassanAboo

14 décembre 2021 à 15:37:06