How do i center Youtube Video (iframe) in twitter bootstrap 3?

问题

Hi I am trying to center the iframe for a Youtube video in Twitter Boostrap 3, currently it is left aligned.

I have used the following html:

      <div class="embed-responsive embed-responsive-16by9">

      <iframe class="embed-responsive-item"  
       src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" 
       align="center" id="videothumbnail"></iframe>

       </div>

CSS:

    #videothumbnail{
    height: 50%;
    width: 50%;
    float: center;}

回答1:

Use classes col-xs-12 text-center. You don't need float:center;

So change this:

<div class="embed-responsive embed-responsive-16by9">

to

<div class="embed-responsive embed-responsive-16by9 col-xs-12 text-center">

回答2:

I was able to center my embed-responsive by bordering it with smaller grids like so:

<div class='row'>
    <div class='col-sm-2'></div>
    <div class='col-sm-8'>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen></iframe>
        </div>
    </div>
    <div class='col-sm-2'></div>
</div>

回答3:

Just add center tags

<center>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"  id="videothumbnail" src="http://www.youtube.com/embed/zpOULjyy-n8?rel=0" align="center"></iframe>
</div>
</center>

回答4:

If working with Bootstrap 4 you could use offset.

<div class="col-sm-8 offset-md-2 embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="750" height="415" src="https://www.youtube.com/embed/{your-video}" frameborder="0" gesture="media" allowfullscreen>
</iframe>
</div>

This limites the embed to 8 columns and keeps 2 columns either side of it blank (totalling 12).

回答5:

wrap the iframe with h(1-2-3...)

<h4 class="text-center">   <iframe ....> </iframe>    </h4>

回答6:

<div class='row text-center'>


    <div class="embed-responsive embed-responsive-16by9">
        <iframe src="https://www.youtube.com/embed/Qt7DFLovvD8?modestbranding=1&showinfo=0" allowfullscreen>

        </iframe>
    </div>
</div>

来源：https://stackoverflow.com/questions/25560954/how-do-i-center-youtube-video-iframe-in-twitter-bootstrap-3