htmlcsstwitter-bootstrapiframe

iframe center in bootstrap

I'm having difficulty getting this iframe (youtube video) to center. I'm using bootstrap and here's my code:

<div class="su-youtube su-responsive-media-yes"><iframe
    width="400"
    height="320"
    src="http://www.youtube.com/embed/SGOc9P4Ynm?modestbranding=1&controls=0&iv_load_policy=3&rel=0&showinfo=0&color=white"
    frameborder="0"></iframe> </div>

I've tried adding the class "center-block" and "text-center" too and also tried removing the iframe from the div. Any ideas?

Solution

  • CSS:

    .su-youtube {
  margin: 0 auto;
  display: block;
}

    CODEPEN EXAMPLE