13

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?

4
  • 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? Mar 16, 2014 at 6: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. Mar 16, 2014 at 6:34
  • Are you using fitvids.js at all? Mar 16, 2014 at 6:37
  • @sheriffderek no, have not even heard of it. Mar 16, 2014 at 6:37

11 Answers 11

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.

6
  • 1
    and here is one with a video: 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. Mar 16, 2014 at 6: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 jsfiddle.net/gLR5s/5 . One more time thank you for looking into my problem. Mar 16, 2014 at 6: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. Mar 16, 2014 at 7:10
  • 1
    Cool, thank you. This works perfectly in every device. Mar 16, 2014 at 7:16
  • 1
    NOTE: In the straight css version, there is a semi-colon (;) missing following margin:auto Jan 9, 2016 at 16:23
13

Youtube uses iframe. You can simply set it to:

iframe {
   display: block;
   margin: 0 auto;
}
1
  • 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. Jun 17, 2017 at 13:48
7
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
0
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;
}
0

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

0

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

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

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

1
  • 1
    The <center> tag is not supported in HTML5. Use CSS instead.
    – candlejack
    Apr 1, 2015 at 4:22
-3

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.