title: How can I align YouTube embedded video in the center in bootstrap
body: <p>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.</p>
  
  <p>My html looks really simple:</p>
  
  <pre><code>&lt;div class="video"&gt;
      &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <a href="http://jsfiddle.net/c4vtH/" rel="noreferrer">this fiddle</a>.</p>
  
  <p>I already tried <a href="https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css">solution1</a>, <a href="https://stackoverflow.com/a/18153551/1090562">solution2</a>, <a href="https://stackoverflow.com/a/14933082/1090562">solution3</a> but with no result. Another partially successful solution was to use:</p>
  
  <pre><code>width: 50%;
  margin: 0 auto; 
  </code></pre>
  
  <p>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?</p>