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?

You just want to align a div in the center of the screen with CSS, right? Is that it's a video or that you are using bootstrap relevant in anyway that isn't suggested in your question? — sheriffderek, Mar 16 '14 at 06:31
@sheriffderek I want to align youtube video in the center. I saw how to align div, but when I tried to use that solution, I was not able to achieve anything. Bootstrap might be relevant, because it by itself created a lot of css styles, so there might be a way to use one of their styles. — Salvador Dali, Mar 16 '14 at 06:34

sheriffderek · Accepted Answer · 2016-01-09T19:34:32.393

13

An important thing to note / "Bootstrap" is just a bunch of CSS rules

a fiddle

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* key stuff */
.your-centered-div {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */

    position: absolute; /* positions out of the flow, but according to the nearest parent */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}

Fully working jsFiddle is here.

EDIT

I mostly use this these days:

straight CSS

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

if your use stylus/mixins ( you should... it's the best )

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.

edited Jan 09 '16 at 19:34

answered Mar 16 '14 at 06:45

sheriffderek

8,848
6
43
70

1

and here is one with a video: http://jsfiddle.net/sheriffderek/gLR5s/3/ --- If you are going to want to be any more responsive then that, you should look at fitvids to deal with the video proportions. Hope that helps, but I imagine that there are tons of bootstrap styles that might mess this up. – sheriffderek Mar 16 '14 at 06:54
Thank you. This is the big progress from what I had previously. The problem is that I do not need it to be centered vertically and that the previous and next text is hidden behind the video. For example http://jsfiddle.net/gLR5s/5/ . One more time thank you for looking into my problem. – Salvador Dali Mar 16 '14 at 06:59
That makes things a log easier then. Boostrap has some silly class called `center-block-element` or something --- but it's just margin auto on the right and left and probably float:none; or something. – sheriffderek Mar 16 '14 at 07:10
1

Cool, thank you. This works perfectly in every device. – Salvador Dali Mar 16 '14 at 07:16
1

**NOTE:** In the straight css version, there is a semi-colon (**;**) missing following **margin:auto** – Ray Mitchell Jan 09 '16 at 16:23
@RayMitchell - Got it. – sheriffderek Jan 09 '16 at 19:35

score 13 · Answer 2 · edited Aug 08 '17 at 18:24

13

Youtube uses iframe. You can simply set it to:

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

edited Aug 08 '17 at 18:24

T.Todua

53,146
19
236
237

answered Jun 17 '17 at 13:31

ToTech

169
1
6

3

It would be helpful if you could put some context around your answer, such as why is it preferred over other methods, why does it resolve the issue, etc. – John M. Wright Jun 17 '17 at 13:48

score 7 · Answer 3 · edited Jun 27 '17 at 05:49

7

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

edited Jun 27 '17 at 05:49

Frits

7,341
10
42
60

answered Jun 27 '17 at 04:41

Miloud Eloumri

779
1
8
14

score 3 · Answer 4 · answered Aug 08 '17 at 18:31

3

You dont have to put <iframe> in a parent div at all. You can target exactly youtube iframe with CSS/3:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}

answered Aug 08 '17 at 18:31

T.Todua

53,146
19
236
237

score 0 · Answer 5 · answered Aug 20 '15 at 06:53

I set the max width for my video to be 100%. On phones the video automatically fits the width of the screen. Since the embedded video is only 560px wide, I just added a 10% left-margin to the iframe, and put a "0" back in for the margin for the mobile CSS (to allow the full width view). I did't want to bother putting a div around every video...

Desktop CSS:

iframe {
  margin-left: 10%;
 }

Mobile CSS:

iframe {
  margin-left: 0;
 }

Worked perfect for my blog (Botanical Amy).

score 0 · Answer 6 · answered Nov 25 '16 at 11:07

Using Bootstrap's built in .center-block class, which sets margin left and right to auto:

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Or using the built in .text-center class, which sets text-align: center:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

score 0 · Answer 7 · edited May 03 '18 at 09:11

<div>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> . 
    </iframe>
</div>

<script>
    function myFunction() {
        var wscreen = window.innerWidth;
        var hscreen = window.innerHeight;

        document.getElementById("myFrame").width = wscreen ;
        document.getElementById("myFrame").height = hscreen ;
    }

    myFunction();

    window.addEventListener('resize', function(){ myFunction(); });
</script>

this works on Vimeo adding an id myFrame to the iframe

Boris Gafurov · Answer 8 · 2018-12-17T15:43:20.107

0

make iframe with align="middle" and put it in paragraph with style="text-aling:center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>

edited Dec 17 '18 at 15:43

answered Dec 17 '18 at 15:15

Boris Gafurov

1,427
16
28

score 0 · Answer 9 · answered Jan 17 '19 at 20:01

For a fully responsive IFramed YouTube video, try this:

<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.blogwidevideo {    
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;    
}

.blogwidevideo iframe {   
    left:10%; //centers for the 80% width - not needed if width is 100%
    top:0;
    height:80%; //change to 100% if going full width
    width:80%;
    position:absolute;
}

score -2 · Answer 10 · answered Aug 16 '14 at 04:54

-2

<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>

It seems to work, is this all you were asking for? I guess you could go about taking longer more involved routes, but this seemed simple enough.

answered Aug 16 '14 at 04:54

Rickles

1

1

The `` tag is not supported in HTML5. Use CSS instead. – candlejack Apr 01 '15 at 04:22

score -3 · Answer 11 · answered Nov 19 '20 at 12:00

The easiest way is by adding tag, before , open the tag and then close it after closing . As said by others tag is not supported by HTML5, and even your ide would show an error. I'm using VS Code and yes it shows an error, but if you check your website the video would be in the center. Youtube still understands the tag :)

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

11 Answers11

HTML

CSS

EDIT

straight CSS

if your use stylus/mixins ( you should... it's the best )

Linked