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
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;
}
i did that originally. did not work. thats why i moved it from the section tag to the iframe tag
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>
how come it works for you and not for me?
Refer this, it works fine, i forked your pen and did the changes i mentioned
so you had to do it twice? one class in the section and another in the iframe itself? can you explain why?
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…
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
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
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.
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
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:
Thank you very much for this solution.