CODEWITHSUNDEEP
cssyoutubetwitter-bootstrap-3html5-video
user3931756
user3931756

Reputation: 111

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;}

Upvotes: 6

Views: 20459

Answers (6)

juan pablo
juan pablo

Reputation: 1

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

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

Upvotes: 0

Dave
Dave

Reputation: 75

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).

Upvotes: 2

Emeka
Emeka

Reputation: 802

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>

Upvotes: 8

macs
macs

Reputation: 1

<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>

Upvotes: -1

Dan
Dan

Reputation: 9468

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">

Upvotes: 15

Joshua Howard
Joshua Howard

Reputation: 85

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>

Upvotes: 4

Related Questions