Centering video

[Jlawal]

Hello,

I'm trying to center a video on this page, but I'm not having much luck.

In an ideal world, the video would sit in the middle of the chalkboard, but i think at this point I'd just be ecstatic if the video was centered and a tidbit smaller.

Any help/suggestions would be greatly appreciated.

Thanks,

Jamila

[tjoyce]

@Jlawal - Can you post a preview link?

[Jlawal]

@tjoyce Sorry that would be helpful! The page can be seen here

[tjoyce · Accepted solution]

@Jlawal - Yea, it is very difficult to add foreground content based on the position of background content since the position of the background changes based on screen size. So, your video is offcenter because the wrapper has 100px padding on the left side, just add 100px to the right side to balance it out. Here's code and screenshot to help out:

#hs_cos_wrapper_module_1533129424898373 {
    padding-left:100px;
    padding-right:100px;
}

Now, if you want to attempt to keep that video center on the chalkboard, you will have to painstakingly add background-position based on many screen sizes. Something like this:

@media screen and (max-width: 1900px){
    .full-width-bg{
        background-position: 95% 50%;
    }
}
@media screen and (max-width: 1800px){
    .full-width-bg{
        background-position: 75% 50%;
    }
}
@media screen and (max-width: 1700px){
    .full-width-bg{
        background-position: 65% 50%;
    }
}
@media screen and (max-width: 1600px){
    .full-width-bg{
        background-position: 59% 50%;
    }
}

and so on..... you'll have to use the chrome inspector, if you're going to do this, to get your sizes accurate.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Jlawal]

That works well on desktop but unfortunately the video completely disappears on mobile. Do you know why that might be? @tjoyce

[tjoyce]

@Jlawal - Yes, too much padding on mobile, lol. try this:

@media screen and (max-width:767px){
.hs-responsive-embed, .hs-responsive-embed.hs-responsive-embed-youtube, .hs-responsive-embed.hs-responsive-embed-wistia, .hs-responsive-embed.hs-responsive-embed-vimeo{
    padding-bottom: 100%;
}
#hs_cos_wrapper_module_1533129424898373 {
    padding-left: 0!important;
    padding-right: 0!important;
}
}

[Jlawal]

Thank you for all of your help!

[gabriel-nextiny]

Hi J, 

We usually use responsive tables (scaffolding) for any kind of videos to make sure they look great on desktop and mobile and to center them

Here's an article that explains how to use it:

http://getbootstrap.com/2.3.2/scaffolding.html

This page is an example of 2 videos side by side using a responsible table.

The code usually goes like this, where AAAA would be the code of your first youtube video and BBBB the second one. Now, if you want to have margings and space between them you can add more span sections. Just remember to make them all add to 12.

6-6

4-4-4

1-5-5-1

1-4-2-4-1

and so on.

If you just want to have one  centered video per row, you can just create 1-10-1 or 2-8-2 rows.

<div class="row-fluid">

<div class="span6">
AAAAA
</div>

<div class="span6">
BBBBB
</div>

</div>

I hope this helps. Let me know if you have any questions.

G