[708824936Participant]

Hi

I am a new user of X theme, so far I am really enjoying it. I recently try to embed a video into my personal website, but I cannot place it to center.

The URL of the site is: http://peterxu.ca/demo-home The video is located on the middle of the page.

Please help me to please it on the center of the page.

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[708824936Participant]

This reply has been marked as private.

[RadModerator]

Hi there,

It’s your embed player that is not responding to the container. It should fill the width, but you may add this CSS at Admin > Appearance > Customizer > Custom > CSS.

.x-video .x-video-inner {
    max-width: 960px;
    margin: 0 auto;
}

Cheers!

[708824936Participant]

Thank you for you reply, it works!

But it is possible to make the video centered vertically with the container?
Right now the bottom margin is much larger than the top.

[FriechModerator]

Hi There,

You can add a Gap element on top of that video just to serve as a top padding.
Gap elements has a Hide based on screen width option, which is helpful when you want this Gap removes on mobile view.

Hope it helps, Cheers!

[708824936Participant]

Thank your for your reply, I have tried your solution. But the problem is still there. I think I did not express it properly. The problem is the location of the video relative to the container of the video. You see this problem when you make the broser really wide. Please view the page http://peterxu.ca/demo-home/. The video is located on the very bottom of the page.

[RadModerator]

Hi there,

Yes, that’s the problem is the player is not responsive. Your player is not taking the size of the container. You can confirm that by directly accessing this URL https://bmplayer-a.akamaihd.net/shareable/embedssl.html?dc=ctvnews_web&cid=504433&col=379&w=960&h=540&pl=0&plh=0&adSite=ctv.ctvnewskitchener&adZone=latestnews&omniAcct=ctvgmnews,ctvgmglobal&section=Kitchener&site=kitchener&shareUrl=http://kitchener.ctvnews.ca/video?clipId=504433&v7=video&v8=home&v9=&v10= and it’s not filling your browser width. All player should fill the browser when directly accessed.

It’s easier to control the width and alignment of the video if it’s outside the player, the hard part is to control the width and alignment within the iframe.

You could try using another player

Or you may add this as well

.x-video.with-container {
    padding: 10% 2.5% 2.5%;
}

Thanks!

[708824936Participant]

Ok, So there is no way to make it fully responsive right?
I can live with it. 99% it looks ok.
Thank you very much.

[FriechModerator]

Yes, we can not apply a CSS rule on a content that is inside the iFrame. Should you require any further assistance with X theme, please feel free to get in touch with us.

Thanks!

[708824936Participant]

Thank you very much, really appreciate your help. Happy New Year.

[FriechModerator]

Glad we could help. Happy new year to you as well.

Cheers!

[Author]

Posts