How can I center the embedded YouTube video in the bootstrap

Question

I am trying to center the embedded YouTube video on the page of the boot page. The video size is always the same.

My HTML looks very 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 concerned only the centering of the div, not the video), and the best I could come up with was this fiddle .

I have already tried solution1 , solution2 , solution3 , but to no avail. Another partially successful solution was to use:

 width: 50%; margin: 0 auto; 

It worked well on a desktop computer, but did not work on an iPad or phone (the video partially went off the screen). How to center the video on the desktop / tablet / phone?

Answer 1

Important to note / "Bootstrap" is just a bunch of CSS rules

violin

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 */ } 

JsFiddle fully works here .

EDIT

I mainly use this these days:

direct CSS

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

if you use a stylus / mixins (you should ... this is best)

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

That way ... you don’t need to know the size of the element - and the translation is based on its size - So, -50% of yourself. Well maintained.

Answer 2

Youtube uses an iframe. You can simply set it to:

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

Answer 3

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

Answer 4

You do not need to embed an <iframe> in the parent div. You can target just the youtube iframe using CSS / 3:

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

Answer 5

I set the maximum width for my video to 100%. On phones, video automatically matches the width of the screen. Since the embedded video is only 560 pixels wide, I just added 10% of the left margin in the iframe and returned "0" for the mobile CSS margin (to allow full width representation). I did not want to worry about placing a div around each video ...

CSS desktop:

 iframe { margin-left: 10%; } 

Mobile CSS:

 iframe { margin-left: 0; } 

Worked perfect for my blog (Botanical Amy).

Answer 6

Using Bootstrap built into the .center-block class, which sets margins on the 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 class .text-center , 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> 

Answer 7

 <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 myFrame adding myFrame in iframe

Answer 8

make an iframe with align = "middle" and put it in the 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> 

Answer 9

For fully responsive IFramed videos on YouTube, try the following:

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

Answer 10

 <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 that all you asked for? Perhaps you could take more active routes, but it seemed simple enough.