How to Align Youtube Embedded Video in the Center in Bootstrap

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

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="Sample Image" />
</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.

With HTMl5 how do I center a embedded YouTube video and center it?

Add the following CSS property to your iframe and:

Demo on Fiddle

iframe {
    display: block;
    margin: auto;
}

Embed an responsive youtube iframe to center of an page

To make you frame center you need to give your videowrapper a specific width and make the margin left and right as auto.

.videowrapper { 
        float: none;
        clear: both;
        width: 700px;<-- Added-->
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;<-- Added-->
        max-width: 100%;<-- Added-->
    }

Working fiddle

Despite you wanna make your frame responsive always use max-width: 100% to your videowrapper.

In Bootstrap 5 how can I style a video to stay at the bottom with centered overlay text?

With Bootstrap 5, you shouldn't have to add the CSS on the iframe, since you have the class ratio on the parent div. Also I believe you need to change the order of your overlay-text element and add a little bit of CSS, like so:

<section className="hero-video">
  <div className="ratio ratio-16x9">
    <iframe
      src="https://youtube.com/embed/wxL8bVJhXCM?controls=0&autoplay=1&mute=1&modestbranding=0&showinfo=0"
      frameBorder="0"
      allow="autoplay; encrypted-media"
      title="video">
    </iframe>
  </div>
  <div className="overlay-text">
    <h1>Foo Bar</h1>
  </div>
</section>

Add top/left to overlay-text class as well:

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(58, 57, 57, 0.5);
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

How to position youtube embedded video under another section since it has covered the entire page banner after making it responsive?

Your code is a mess to be honest. You have multiple div without closing tag,p without closing tags,
also some = are missing while declaring classes in your html code.

First go through your code, make sure that every single tag has a closing tag, after that continue with your video because if you dont fix these things, then your responsivity will be broken because of those unclosed tags.

Have a look into that, i have fixed the video so now it is under your featured section, you just have to play around with it to make it responsive after you closed every unclosed tag.

<section id="featured">
    <div class="featured-container">
        <h2 id="sections">featured</h2>
        <div class="vid-container">
            <iframe class="vid-container-iframe"
                src="https://www.youtube.com/embed/MJMMZvBK6nU?autoplay=1&showinfo=0&rel=0&color=white" width="560"
                height="315" frameborder="0"></iframe>
        </div>
    </div>
</section>

---

Related Topics