can't get video to center in responsive div

[Doug]

Hello,

Does anyone know how to center a video in a responsive div?

I really appreciate the help; I can't figure this out.

Thanks, Doug

<div class="video-container"><iframe src="//www.youtube.com/embed/vnyBn3QgBrg" height="332" width="590" allowfullscreen="" frameborder="0"></iframe></div>

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    max-width: 590px;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

http://usasharp.com/

[Tony @ AlphaBlossom]

Hello,

adding "margin: auto;" to your .video-container style (around line 1898 of your theme's styles.css file) will center it.

Have a great weekend!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[AnitaC]

Right, I only added this to my CSS and it works fine.

.video-container {
    margin: 0 auto;
    width: 68%;

}

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

Tony,

Thank you, bless you; have a nice weekend yourself!

Peace and gratitude,
Doug 🙂

[Doug]

Thanks, Anita.

I appreciate it!

Doug

[Tony @ AlphaBlossom]

Hi Doug, you're very welcome!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Wirebird]

Thanks guys, this worked perfectly! Just needed to change absolute to relative for my theme.

---

Sara @ Wirebird Media – WordPress and Genesis web developer based in Bend, Oregon

[Author]

Posts