[Solved] Centering Image/Video Embeds  


Sean
Posts: 2
 Sean
Customer
(@seanb793)
Member
Joined: 3 years ago

Hi,

Thanks for the WpForo plugins and its wonderful add-on's as well! 

My question pertains to wpForo Embeds in particular; users are mentioning that they can't seem to centre the image/video embeds on their posts. Please see the last post on this thread from our website -  https://highereg.com/forums/sam-oz/sam-ozs-main-portfolio-thread/#post-70

As you can see, the video playlist is aligned to the left. Here's the source code of the post -- 

<p>Hello everyone,</p><p>I would like to show you a personal project, a tribute to Ghibli's studio.</p><p>You can follow the thread here : <a title="Tribute to Ghibli" href="https://highereg.com/forums/sam-oz/personal-project-tribute-to-ghibli/" target="true"> https://highereg.com/forums/sam-oz/personal-project-tribute-to-ghibli/</a></p><p>I explain a few things about each track.</p><p> </p><p><a title="Tribute to Ghibli" href="https://youtu.be/M7Y6M8poNF0?list=PLtXeYdQkBIfpr75mP2cXxPmWsB_ze_p1u" target="true">

 

As you can see, using the 'Align Centre' option from the text editor doesn't work -- nor does using HTML tages <center> within the source code. How may we solve this?

 

Thanks!

4 Replies
Tom
Posts: 2949
 Tom
Admin
(@tomson)
Support Team
Joined: 4 years ago

This kind of embedded objects are not a simple text to align. They are not align-able. You should use extra wrapper divs like explained it here (use {;} source button to inset extra divs, don't insert it in visual editor mode):

https://premium.wpmudev.org/blog/how-to-center-a-video-in-wordpress/

2 Replies
maltrain
Customer
(@maltrain)
Joined: 5 months ago

Member
Posts: 8
Posted by: Tom

This kind of embedded objects are not a simple text to align. They are not align-able. You should use extra wrapper divs like explained it here (use {;} source button to inset extra divs, don't insert it in visual editor mode):

https://premium.wpmudev.org/blog/how-to-center-a-video-in-wordpress/

That's a case by case solution... is any way of making the process automatic on every post?

Astghik
Admin
(@astghik)
Joined: 2 years ago

Support Team
Posts: 3267

Hi @maltrain,

Please try the following CSS code, add it in Dashboard > Forums > Settings > Styles > "Custom CSS code" textarea, save it, delete all caches and check again (press CTRL+F5 on frontend). Please open a new support topic and leave some URL to allow us to check it if the CSS code I've provided doesn't help:

#wpforo-wrap .wpforo-post-content .wpf-video {
text-align: center;
margin: 0 auto !important;
}
Sean
Posts: 2
 Sean
Customer
(@seanb793)
Member
Joined: 3 years ago

Thanks! That works for all standard YT links and images. However, I've found that wrapping entire YT PLAYLIST links with the <div> tags do not seem to work. They remain left-aligned regardless.

Share:
Green
Default
Pear
Black Emo
{green}:grinning:
{green}:wink:
{green}:face:
{green}:inlove:
{green}:sweaty:
{green}:surprised:
{green}:lovekiss:
{green}:laugh:
{green}:formalsmile:
{green}:displeased:
{green}:cool:
{green}:resent:
{green}:nerd:
{green}:screaming:
{green}:amazed:
{green}:sad:
{green}:deceitful:
{green}:starryeyes:
{green}:evil:
{green}:shocked:
{green}:tears:
{green}:sulky:
{green}:smile:
{green}:vomited:
{green}:hi:
{green}:afraid:
{green}:crazy:
{green}:rabid:
{green}:fighting:
{green}:nonoise:
{green}:blushed:
{green}:idontknow:
{green}:scared:
{green}:razz:
{green}:kiss:
{green}:eat:
{green}:shutmouth:
{green}:gape:
{green}:suspicious:
{green}:laughingoutloud:
{green}:bruise:
{green}:crying:
{green}:pray:
{green}:serious:
{green}:excitement:
:)
:d
:wink:
:mrgreen:
:neutral:
:twisted:
:arrow:
:shock:
:???:
:cool:
:evil:
:oops:
:razz:
:roll:
:cry:
:eek:
:lol:
:mad:
:sad:
:!:
:?:
:idea:
:hmm:
:beg:
:whew:
:chuckle:
:silly:
:envy:
:shutmouth:
{pear}:happy:
{pear}:smile:
{pear}:laugh:
{pear}:laughingoutloud:
{pear}:crying:
{pear}:exhausted:
{pear}:nerd:
{pear}:surprised:
{pear}:veryhungry:
{pear}:wink:
{blackemo}:laughtertotears:
{blackemo}:gift:
{blackemo}:love:
{blackemo}:inlove:
{blackemo}:shamefaced:
{blackemo}:heart:
{blackemo}:crazy:
{blackemo}:anguished:
{blackemo}:bruise:
{blackemo}:easymoney:
{blackemo}:exhausted:
{blackemo}:vampire:
{blackemo}:shutmouth:
{blackemo}:wink:
{blackemo}:carnival:
{blackemo}:flowers:
{blackemo}:hotdrink:
{blackemo}:party: