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    lt div class  video  gt       lt iframe width  560  height  315  src  https   www youtube com embed ig3qHRVZRvM  frameborder  0  allowfullscreen    gt  lt  iframe gt   lt  div gt    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

User · Answer

Youtube uses iframe  You can simply set it to   iframe      display  block     margin  0 auto

User · Answer

lt div gt       lt iframe id  myFrame  src  https   player vimeo com video 12345678 autoplay 1  width  640  height  360  frameborder  0  allowfullscreen gt          lt  iframe gt   lt  div gt    lt script gt      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         lt  script gt    this works on Vimeo adding an id myFrame to the iframe

User · Answer

You dont have  to put  lt iframe gt  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

User · Answer

lt center gt  lt div class  video  gt   lt iframe width  560  height  315  src  https   www youtube com embed ig3qHRVZRvM  frameborder  0  allowfullscreen    gt  lt  iframe gt   lt  div gt  lt  center gt    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

User · Answer

Using Bootstrap s built in  center-block class  which sets margin left and right to auto    lt iframe class  center-block  width  560  height  315  src  https   www youtube com embed ig3qHRVZRvM  frameborder  0  allowfullscreen    gt  lt  iframe gt    Or using the built in  text-center class  which sets text-align  center    lt div class  text-center  gt     lt iframe width  560  height  315  src  https   www youtube com embed ig3qHRVZRvM  frameborder  0  allowfullscreen    gt  lt  iframe gt   lt  div gt

User · Answer

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    x000D   x000D  iframe   x000D    margin-left  10   x000D     x000D   x000D   x000D    Mobile CSS    x000D   x000D  iframe   x000D    margin-left  0  x000D     x000D   x000D   x000D    Worked perfect for my blog  Botanical Amy

User · Answer

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

User · Answer

For a fully responsive IFramed YouTube video  try this    lt div class  blogwidevideo  gt   lt 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 gt  lt  iframe gt   lt  div gt    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

User · Answer

An important thing to note    Bootstrap  is just a bunch of CSS rules  a fiddle  HTML   lt div class  your-centered-div  gt       lt img src  http   placehold it 1120x630 amp text Pretend Video 560x315  alt      gt   lt  div gt      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

User · Answer

make iframe with align  middle  and put it in paragraph with style  text-aling center     lt p style  text-align center   gt   lt iframe width  420  height  315  align  middle  src  https   www youtube com embed YOURVIDEO  gt   lt  iframe gt   lt  p gt

User · Answer

lt iframe style  display  block  margin  auto   width  560  height  315  src  https   www youtube com embed ig3qHRVZRvM  frameborder  0  allowfullscreen gt  lt  iframe gt

[css] How can I align YouTube embedded video in the center in bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to youtube