# Centering video

**URL:** <https://community.hubspot.com/t/centering-video/9828>\
**Category:** CMS Development\
**Created:** [August 13, 2018, 4:13pm UTC](https://community.hubspot.com/t/centering-video/9828 "2018-08-13T16:13:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jlawal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlawal/32/5125_2.png) [@Jlawal](https://community.hubspot.com/u/Jlawal)\
**Post date:** [August 13, 2018, 4:13pm UTC](https://community.hubspot.com/t/centering-video/9828/1 "2018-08-13T16:13:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 13, 2018, 5:07pm UTC](https://community.hubspot.com/t/centering-video/9828/2 "2018-08-13T17:07:34Z")

</div>

@Jlawal - Can you post a preview link?

---

<div class="post-metadata">

**Author:** ![Jlawal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlawal/32/5125_2.png) [@Jlawal](https://community.hubspot.com/u/Jlawal)\
**Post date:** [August 14, 2018, 9:11am UTC](https://community.hubspot.com/t/centering-video/9828/3 "2018-08-14T09:11:06Z")

</div>

@tjoyce Sorry that would be helpful! The page can be seen [here](http://www.groupcall.com/-temporary-slug-86169a92-1e55-49e0-9183-d4b769301ae9?hs_preview=QbVvbBgx-6034527223)

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 14, 2018, 11:45am UTC](https://community.hubspot.com/t/centering-video/9828/4 "2018-08-14T11:45:19Z")

</div>

@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:

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

```

 ![offcenter.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/2/21dc2e2f9079e6e616db1a98c0b2d10cf7876ea4.jpeg)

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:

```auto
@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](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![Jlawal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlawal/32/5125_2.png) [@Jlawal](https://community.hubspot.com/u/Jlawal)\
**Post date:** [August 14, 2018, 12:11pm UTC](https://community.hubspot.com/t/centering-video/9828/5 "2018-08-14T12:11:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [August 14, 2018, 12:26pm UTC](https://community.hubspot.com/t/centering-video/9828/6 "2018-08-14T12:26:38Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Jlawal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jlawal/32/5125_2.png) [@Jlawal](https://community.hubspot.com/u/Jlawal)\
**Post date:** [August 16, 2018, 10:20am UTC](https://community.hubspot.com/t/centering-video/9828/7 "2018-08-16T10:20:35Z")

</div>

Thank you for all of your help!

---

<div class="post-metadata">

**Author:** ![gabriel-nextiny](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/gabriel-nextiny/32/88560_2.png) [@gabriel-nextiny](https://community.hubspot.com/u/gabriel-nextiny)\
**Post date:** [September 12, 2018, 12:58pm UTC](https://community.hubspot.com/t/centering-video/9828/8 "2018-09-12T12:58:03Z")

</div>

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:

> **[Scaffolding · Bootstrap](https://getbootstrap.com/2.3.2/scaffolding.html)**

[This page](https://www.nextinymarketing.com/seo) 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.

```auto
<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