How to center an iframe video

HTML-CSS
1

I’m trying to center my iframe video tag & increase the width, please i’m stucked & need help on this…Here’s my code in html & CSS below…You’ll find my iframe tag @ line 72 in my html structure…

<link rel="stylesheet" href="styles.css">
 <script src="https://kit.fontawesome.com/fa4d84cc52.js" crossorigin="anonymous"></script>
 
        <header id="header">
          <div class="logo">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo">
     </div>
      
       
       <div class="container">
        <nav id="nav-bar">
           <ul>
             <li><a class="nav-link" href="#features">Features</a>
               </li>
                 <li> <a class="nav-link" href= "#how_it_works">How it works</a></li>
                   <li>
                     <a class="nav-link" href= "#pricing">Pricing</a></li>
                        </ul>
                          </nav>
      </header>
          
          
      
<section id="hero">
<h1>Handcrafted, home-made masterpieces</h1>
  <form action="https://www.freecodecamp.com/email-submit" id="form">
    <input type="email" id="email" name="email" placeholder="Enter your email address" required />
     <input type="submit"  id="submit" value="GET STARTED" class="btn" />
       </form>
       </section>
      
       <main>
         <section id="features">
           <div class="features">
             <div class="icon"><i class="fa-solid fa-spa"></i>
               </div>

               <div class="description">
                 <h2>Premium Materials</h2>
                   <p>
                     Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
                  </div>
                  </div>
             
             <div class="features">
                    <div class="icon">
                      <i class="fa-solid fa-truck"></i>
                     </div>

                  <div class="description">
                    <h2>Fast Shipping</h2>
                      <p>
                        We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
                        </div>
                        </div>
                   <div class="features">
                     <div class="icon">
                       <i class="fa-solid fa-square-check"></i>
                    </div>

                    <div class="description">
                      <h2>Quality Assurance</h2>
                        <p>
                          For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
                        </p>
                        </div>
                        </div>
                        </section>
                        </main>
        
      <section id="how-it-works">
       <iframe
        id="video"
        height="315"
        src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
        frameborder="0"
        allowfullscreen></iframe>
      </section>
        <section id="pricing">
          <div class="product"><br>
            <div class="product-name">TENOR TROMBONE</div>
              <h2>$600</h2>
                <ol>
                  <li>Lorem ipsum.</li>
                  <li>Lorem ipsum.</li>
                  <li>Lorem ipsum dolor.</li>
                  <li>Lorem ipsum.</li>
                </ol>
                <button class="button">select</button>
                </div>
                <br>
          
          <div class="product">
                  <div class="product-name">BASS TROMBONE</div>
                    <h2>$900</h2>
                      <ol>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum.</li>
                        <li>Lorem ipsum dolor.</li>
                        <li>Lorem ipsum.</li>
                        </ol>
                        <button class="button">select
                        </button>
                        </div><br>

                <div class="product">
                  <div class="product-name">VALVE TROMBONE</div>
                   <h2>$1200</h2>
                     <ol>
                       <li>Plays similar to a Trumpet</li>
                       <li>Great for Jazz Bands</li>
                       <li>Lorem ipsum dolor.</li>
                       <li>Lorem ipsum.</li>
                     </ol>
                     <button class="button">select</button>
                     </div>
                     </section>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: arial, verdana;
  background-color: #f0ebe3
}

#header {
  position: fixed;
  top: 0;
  min-height: 80px;
  display: flex;
  width: 100%;
  height: 80px;
  padding: 15px;
  justify-content: center;
  align-items: space-around;
  background-color: inherit;
}



ul {
   list-style: none;
}

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}

.logo img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 25px;
}

nav {
  text-align: right;
}


#nav-bar {
 text-align: right;
 max-width: 2000px;
 display: inline-block;
 position: initial;
 padding-left: 25rem;
 margin-left: 10px;
}


.nav-link {
  font-size: 1.2rem;
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  padding: 10px;
  text-align: right;
  }

  #header-img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
  }

#hero {
  margin: 7rem auto 2rem;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100px;
  font-size: 1.6rem;
  padding-right: 10%;
 }

 #hero h1 {
   word-wrap: break-word;
   justify-content: center;
   align-items: center;
   font-family: times new roman, verdana;
  
 }

#hero input[type='email'] {
  width: 100%;
  max-width: 400px;
  padding: 5px;
  margin: 0rem;
  border-radius: 80px;
}

form {
display: flex;
flex-direction: column;
align-items: center;
}


.btn {
 padding: 0 20px;
  height: 40px;
  font-size: 20px;
  font-weight: 1000;
  text-transform: uppercase;
  border: 2px solid black;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
 
  
}

#hero input[type='submit'] {
  max-width: 200px;
  width: 100%;
  height: 30px;
  margin: 20px 0;
  border: 0;
  background-color:  lightgreen;
}


form {
  margin: 15px;
  align-items: right;
}


#nav-bar ul {
  width: 30vw;
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

#nav-bar ul li {
  display: inline-block;
  margin: 10px;
  text-align: center;
  align-items: center;
  padding-bottom: 10px;
  justify-content: space-around;
}

.container {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}



a {
  text-decoration: none;
  color: #000;
}

li {
  list-style: none;
}

main {
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 5rem auto;
  padding-right: 10px;
}

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem;
  padding-left: 2px;
}


 .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 5rem;
  padding-left: 5px;
  margin: 20px;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  margin: 10px;
  font-size: 20px;
}

.description > h2 {
  font-size: 30px;
}


.fa-solid {
  display: column;
  font-size: 3rem;
  color: darkgreen;

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 5rem;
  padding-left: 5px;
  margin: 20px;
}

.description, h2 {
  display: flex;
  margin: 3px;
}
  
#how-it-works {
  margin-top: 60px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
  position: absolute;
  height: 100%;
}
2

To clarify:
to center it inside the parent? Or relative to what exactly?
For width you have width property, try to set it how you see fit, and work from there.
Share the link, if you have this on codepen or somewhere, it would be cool if we could see how the page looks

and by the way

this div is not closed I guess

3

What do you mean try to set it how you see fit??

4

to center it inside the parent? Or relative to what exactly?

YES i want to center it inside the parent tag, basically i just want my iframe video to be at the center of my page and also have the width increased…I tried everything but it won’t center the video and i also added a closing tag but nothing changed…

5

Here’s the link to my codepen

6

@admit8490 Did you get it??

7

It would appear the width of the video is specified directly in the iframe, so if you wanna modify the width of the frame you can do it there:

<iframe id="video" width="560" height="315"

As mentioned previously it does appear that your sections aren’t properly closed… I don’t have time for a deep dive, but seems to open as header, div, nav, but then closes as nav header div. Also the indents and spacing don’t follow standard layout so its rather difficult to read, so I can’t at a glance verify that all your other tags are properly opened/closed. You may want to go and format with appropriate spacing. If tags aren’t properly closed it may be why centering your iframe is not responding as expected to things like margin:auto, etc.

8

iframes are inline by default, so one way to center them is to set them to block display and use auto side margins.

2 Likes
9

@kinome79 Sorry what do you mean by that??

11

I did that, still didn’t work for me…I’ve been stucked on this for days & i’m getting frustrated…I have another way to center my iframe, but i just don’t know why i can’t center it using CSS, I’m just really curious!!!

12

I used your codepen link above, change the display to block and set the side margins to auto and it centered for me. I’m not sure why it doesn’t work for you?

The <center> tag??? No. I’m not trying to be mean here but you would get laughed out of the room if you submitted that as production code.

14

Yes i used the center tag and it centered it for me, well i don’t care if i get laughed out as long as it works for me…Are you saying i should style my #how-it-works using the display property and set it value to block or what did you style exactly??

15

Sorry, but you should care in this case. The center element is deprecated, which means it should no longer be used and basically doesn’t exist anymore, even if some browsers still support it.

We are talking about the iframe here, right? That’s what I’m styling. I’ve told you the two changes I made to get it to center. Please try those on the iframe.

And this is just one way to do it. If you weren’t going to add any other content to this section then you could also set the display on the section to flex and center it that way.

16

lol but many top websites still use it and many people as well

17

You will come to find that a lot of “top” websites and people do things that they should not do. I specialize in accessibility and those “top” websites do a lot of stuff that is terrible for accessibility even though they should know better and have the financial resources to fix it.

If you don’t want to believe me about the center element that is your prerogative. But MDN agrees with me as well as most serious developers. I’m just trying to help you out here. If you had a portfolio you were using to try to get a job and it used the center element I think you would not get many interviews.

18

lol okay we see differently

19

I just styled my iframe now & it still not working, not sure what i did wrong here…

#how-it-works {
  display: block;
  justify-content: center; 
}

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
  display: block;
  margin: auto;
}
20

Two things:

  • You want display: flex to use justify-content.
  • Use codepen to analyze your CSS. You are missing a closing curly brace which is causing your CSS to fail.
21

What do you mean by that??Because you asked me to use display: block; which i did…

22

I styled my CSS using codepen and please where did i miss out the curly brace because i just looked i can’t find it