How do you center the CP Media Player on page?

Hi,

There are multiple options for centering the player in the page, I will list two of them:

1. Insert the shortcode between <center></center> tags; but you should use, in this case, a <span></span> tag with text-align to the left, avoiding that the texts in the playlist be centered. For example: <center><span style=”text-align:left;”>[codepeople-html5-media-player id=”1″]</span></center>

2. Another solution is with a div tag. I will suppose you have assigned to the player 400px of width, so in the styles assigned to the div I will use the half of the player’s width, 200px (you should use the corresponding values to your player’s width): <div style=”display:inline-block;margin-left:calc( 50% – 200px );”>[codepeople-html5-media-player id=”1″]</div>

Note: In my demos, I’m using 1 as the player ID, but in your case this number might be different.

Best regards.

Thank you. But I don’t think I did this correctly. I typed this into the Page section:
[<center><span style=”text-align:left;”>] [codepeople-html5-media-player id=1] [</span></center>]

And the pre-media and post-media code appeared directly on the page like the screenshot I attached.

I’m not a developer, so should this code go somewhere else? OR what else could I try in the Page space?

Hi,

Please, don’t insert the tags between the [ ] symbols.

<center><span style=”text-align:left;”>[codepeople-html5-media-player id=1] </span></center>

Tip: Be sure to select first the “Text” tab in the content’s editor, or the symbols <> will be replaced by < and >

Best regards.

Thank you for the TEXT tab tip. It still didn’t center it though. Any other ideas?

https://garysideas.com/?page_id=389&preview=true&preview_id=389&preview_nonce=aa058d00f7

Hi,

You’ve sent me the link to a preview page, and the preview pages can be loaded only for logged users. Could you send me a link to a public page to check it, please?

Best regards.