Trying to Center short 2 min video in the center of page (css tweak)

nickpicchettilmt · Member · Mar 16, 2017 at 3:44 pm
Copy link

Add topic to favorites
I am trying to center a video in the center of the a page. By default it is aligned to the left and nothing I do can align it to the middle. I was referred to this board by wordpress customer service and they said someone should be able to help me out and said it would have to do something with a css tweak. Thanks.

The blog I need help with is: (visible only to logged in users)
seattlecommercialdevelopment · Member · Mar 16, 2017 at 5:29 pm
Copy link
The video Nick is referencing is at https://nickpicchettilmt.com/benefits/

I have the same question for my video at https://seaconllc.wordpress.com/

I will not create a new topic in hopes this gets answered.
seattlecommercialdevelopment · Member · Mar 16, 2017 at 6:38 pm
Copy link
Nick,
I actually found a way to center video using page HTML, not theme css. So far it works on the 3 formats in previewer, PC, tablet, phone for me.
1. Go to edit page where you want to center video
2. Find ‘HTML’ tab and select. Tab is upper right area, by default you are on ‘Visual’ tab
3. Find your embedded video code/link usually in this form
  <p style=”color:green”;>[wpvideo xxxxxxx]</p>
4. Wrap that embedded video link/code in the following code:
  <p style=”color:green”;>[<div style=”text-align: center;”>
  [wpvideo xxxxxxx]
  
  </div></p>
seattlecommercialdevelopment · Member · Mar 16, 2017 at 6:47 pm
Copy link
Sorry to flood you with responses but this forum doesn’t let me edit/delete my last post….smh

the code should look like this, excluding the <p style&gt excerpts
1. Find your embedded video code/link usually in this form
  [wpvideo xxxxxxx]
2. Wrap that embedded video link/code in the following code:
  <div style=”text-align: center;”>
  [wpvideo xxxxxxx]
  
  </div>
thesacredpath · Member · Mar 17, 2017 at 9:15 am
Copy link
@nickpicchettilmt, we can do this with CSS also. For the video on your Benefits page, add the following to your custom CSS.
```
.page-id-199 iframe {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
```
Since the iframe the video is in does not have a CSS class or CSS id, I’ve used the unique page id CSS class from the opening body html tag for that page.

No items found.