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

Question

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

possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) — davidcondrey, Oct 05 '14 at 00:04
@dcc this is definitely not a duplicate of that question. This question is talking about how to use classes that are built into the Bootstrap from Twitter framework, Version 3. — wuliwong, Jan 04 '15 at 18:53

Dan · Answer 1 · 2014-12-15T14:35:22.857

15

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

edited Dec 15 '14 at 14:35

answered Aug 29 '14 at 02:52

Dan

9,391
5
41
73

I think the class you are looking for is text-center not center-text – etoisarobot Dec 15 '14 at 14:05

score 8 · Answer 2 · edited Jan 19 '17 at 22:39

8

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>

edited Jan 19 '17 at 22:39

Paul Roub

36,322
27
84
93

answered Feb 28 '15 at 23:03

Emeka

782
2
9
15

You can add the class `col-sm-offset-2` to your centered div instead of having an empty one before. – ymoreau Nov 17 '18 at 14:27

score 4 · Answer 3 · answered Aug 29 '14 at 03:18

4

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>

answered Aug 29 '14 at 03:18

Joshua Howard

85
6

score 2 · Answer 4 · answered Nov 26 '17 at 03:43

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

score 0 · Answer 5 · answered May 27 '18 at 21:20

0

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

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

answered May 27 '18 at 21:20

juan pablo

1

Wouldn't just the class do the text align if placed on any element? Why is your answer better than the other ones given a few years back? – Syfer May 27 '18 at 21:23

score -1 · Answer 6 · edited Jul 29 '16 at 14:13

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

edited Jul 29 '16 at 14:13

wogsland

9,106
19
57
93

answered Jul 29 '16 at 13:59

macs

1

Welcome to Stack Overflow! Please add some explanation of why this code helps the OP. This will help provide an answer future viewers can learn from. See [answer] for more information. – Heretic Monkey Jul 29 '16 at 22:32

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

6 Answers6

Linked