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

Question

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="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

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?

Answer 1

<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>

Answer 2

Youtube uses iframe. You can simply set it to:

iframe {
   display: block;
   margin: 0 auto;
}