How can I align YouTube embedded video in the center in bootstrap
You dont have to put <iframe>
in a parent div at all. You can target exactly youtube iframe
with CSS/3:
iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
display: block;
margin: 0 auto;
}
Youtube uses iframe. You can simply set it to:
iframe {
display: block;
margin: 0 auto;
}
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
An important thing to note / "Bootstrap" is just a bunch of CSS rules
a fiddle
HTML
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
CSS
/* key stuff */
.your-centered-div {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 0; right: 0; /* confuse it i guess */
bottom: 0; left: 0;
margin: auto; /* make em equal */
}
Fully working jsFiddle is here.
EDIT
I mostly use this these days:
straight CSS
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
if your use stylus/mixins ( you should... it's the best )
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.