Centering video

SOLVE
Top Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Top Advisor | Gold Partner

@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;
}

offcenter.png

 

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 Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

7 Replies 7
Top Advisor | Gold Partner

@Jlawal - Can you post a preview link?

Reply
0 Upvotes
Top Contributor

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

Reply
0 Upvotes
Top Advisor | Gold Partner

@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;
}

offcenter.png

 

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 Smiley Very Happy


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

 

Drop by and say Hi to me on slack.

Top Contributor

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

Reply
0 Upvotes
Top Advisor | Gold Partner

@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;
}
}
Highlighted
Top Contributor

Thank you for all of your help!

Regular Contributor | Platinum Partner

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

Reply
0 Upvotes