Salvador Dali Salvador Dali - 8 months ago 109
CSS Question

How can I align YouTube embedded video in the center in bootstrap

I am trying to align YouTube embedded video in the center of the page in my bootstrap page. The size of the video is always the same.

My html looks really simple:

<div class="video">
<iframe width="560" height="315" src="" frameborder="0" allowfullscreen=""></iframe>

I tried different solutions from stackoverflow (which addressed just centering a div, not a video) and the best I was able to came up with was this fiddle.

I already tried solution1, solution2, solution3 but with no result. Another partially successful solution was to use:

width: 50%;
margin: 0 auto;

It worked nicely on desktop, but failed on iPad or a phone (the video went partially outside of a screen). How is it possible to center the video properly in desktop/tablet/phone?


An important thing to note / "Bootstrap" is just a bunch of CSS rules

a fiddle


<div class="your-centered-div">
    <img src=" Video 560x315" alt="" />


/* 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.


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 )

    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.