Centering video on tribute page

Hi everybody. I’m working on my tribute page and am having trouble centering the video I have included. This code works fine when I run it in Chrome but the video pulls left on Codepen. I’m missing something obvious, right?

My pen: https://codepen.io/GerHynes/pen/EmzQvX

So… it looks like the column offset isn’t working. (To see that that’s the problem, try plugging this into your CSS:)

#video .row {
  outline: 1px solid yellow;
}

#video .col-md-8 {
  outline: 1px solid blue;
}

After that, it’s just a matter of figuring out why not. If you want just a hint: The version of bootstrap that you’re using on CodePen is version 4. I’m guessing that’s not the version you’re running on your computer.

If you want the actual solution:

The new syntax to offset columns has apparently changed from col-md-offset-* to offset-md-*.

2 Likes

Hi,
No no are not missing something obvious. I had this problem when I was working on my project. I found the answer a couple places. First here toward the bottom in the responsive embed section:
https://www.w3schools.com/bootstrap/bootstrap_images.asp
Also when I validated my site it came back that some things were no longer used, such as
frameborder, marginwidth, height, and scrolling.
With the changes if you add this it should work, but it does need some size adjustment. Here is the changes I made with the above from your codepen:
div class="col-xs-12 col-sm-10 text-center"
h2Learn More/h2
div class="embed-responsive embed-responsive-4by3"
iframe class=“embed-responsive-item seamless allowfullscreen” src=“https://www.youtube.com/embed/dFUsguiIm70” allowfullscreen /iframe
/div
Sorry I took out the brackets because it wasn’t showing, I’m still new to this so if there is a better way to show code please let me know. Also if there is a better way please share :smile:
I hope this helps.

1 Like

Hello GK-Hynes,

I think this could help you https://stackoverflow.com/questions/22433616/how-can-i-align-youtube-embedded-video-in-the-center-in-bootstrap

let me know if it work for you.

by the way have in mind that if you want to work with bootstrap, you need to add jQuery library: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

it goes before bootstrap in order to work.

Kind regards,

Nelson

1 Like

Thanks for the helpful advice, AgathaLynn. Checking Boostrap 4’s docs helped clarify it.

Thanks for the feedback, lestec.

Thank you too, Nelson, for your advice.

1 Like