Search code examples
cssvideoembed

Centering YouTube Embed on Page

I've been trying to center my YouTube video embed but it just won't work properly.

I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here

My Code:

CSS

    .Video {
      display: inline-block;
      position: absolute;
      padding-left: 15px;
      padding-right: 15px;
      transform: translate(0,-50%);
    }

enter image description here

Solution

  • The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.

    Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;