Put video in center of page

HTML-CSS
#1

Somebody gave me the answer to this once but i cant find it because i went of fcc for a while. I am trying to put the video in the center and its not budging :
https://codepen.io/Dee55/pen/KewyqE

#2

Add a class or id to your <section class="example" or id=""></section> which contains the video and apply flexbox properties

.example {
display: flex;
flex-direction: column;
align-items: center;
}
1 Like
#3

i did that originally. did not work. thats why i moved it from the section tag to the iframe tag

#4

Well this works.

Screenshot%20from%202018-08-02%2018-01-28
Screenshot%20from%202018-08-02%2018-01-281366×768 302 KB

1 Like
#5

You can also put it in a div like this

    <div style="text-align:center;">
    <iframe width="420" height="420" class="video" 
src="https://www.youtube.com/embed/m1jlkLcmwqM">
</iframe>
      </div>
3 Likes
#6

how come it works for you and not for me?

#7

Refer this, it works fine, i forked your pen and did the changes i mentioned

#8

so you had to do it twice? one class in the section and another in the iframe itself? can you explain why?

#9

i have a different solution here
https://codepen.io/hbar1st/pen/MBGJwb

basically, I took out your width and height settings (you shouldn’t put these in the html because it makes it hard to make the video size responsive) and then I aligned your iframe.

You can add the width and height back in the css…

#10

No…no, you can delete the styles you had given for the iframe, i think for the class .video if i am not wrong, you can delete those

#11

what do you mean by aligned the iframe? And may i ask why you didnt go with the popular align items, flex and whatnot direction for this. Thank you

#12

this is what i did, (you can check the codepen)

section iframe {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

flex and whatnot are good if you have an overall design/framework for your page that you are following. But I checked your page and your video is just all by itself in a section so nothing complicated is needed to center it.

#13

i see. but how does putting auto on left and right margins center it? what does auto mean? I thought it meant just make the margin anything

#14

read here:

auto
The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of margin-left and margin-right are both auto, the calculated space is evenly distributed.

which I got from here:

#15

Thank you very much for this solution.

#16