Hey all. I need some help centering this video.
This is the page:
Page with video I want centred
It’s in a Wordpress post but the video is embedded in a HTML block. There’s a reason for that which I won’t bore you with.
This is the code I’m using for the HTML embed:
<video src="https://photoform.com.au/wp-content/uploads/sites/18934/2022/04/PhotoformLogo.mp4" width="2400px" muted="" autoplay="" loop="">
</video>
Thank you!
I tried to go to the page via link you provided to view the source and get more context of the layout because there are different ways to center content.
Depending on whether it is inline or if you’ve wrapped it in another element tag that is block. As posted here it seems to be inline, but I’d really like to see the context.
But that page was either moved or renamed, or the link is wrong. I can’t get to it.
Perhaps this helps…
Centering in CSS: A Complete Guide
Without any more context with regard to your layout, parent elements or containers, CSS, it’s hard to say more.
Ok just published post which didn’t want to do cos it’s not ready lol.
I’ll take it down later.
This is the post:
Post with video I want centred.
Well, if I add a class video:
<video class="video" src="https://photoform.com.au/wp-content/uploads/sites/18934/2022/04/PhotoformLogo.mp4" muted="" autoplay="" loop="" width="2400px">
</video>
and on the class set:
.video {
margin: auto;
width: 100%;
}
That makes it align with the text, if that’s what you are wanting.
The width: 100%; makes it fill the parent container without overflowing the container (since the video is 2400px wide) if that’s what you are wanting.
Thank you! But I want it to overflow the container.
Then I think you have to take it out of the parent div and center it relative to the page body, because you have a lot of space on the left of the page. So with the current layout it is going to start there and center starting at that indentation. And since it’s 2400px, it goes way off to the right.
Where does that class code go?
Ok I worked out where the class code goes. I don’t know how to take it out of the parent div etc.
My knowledge is super basic. Any help is greatly appreciated!
There’s a lot of CSS in that page, you could put it in the CSS file for that page or add it between the style tags that are in the page head section. Internal (to the page) styles will override linked style sheets.
it’s like you are speaking a foreign language lol.
talk to me like I’m a 3 year old.
In simple terms, a div is an invisible container that you wrap around elements and then you can style any content in that container in a particular way.
You could place it on it’s own by putting it between
<div data-sid="post-title_2" class="sie-post-title_2 se" style="transform: scale(1.17188) translate(23.8333px, 24.0533px);"><p class="se-t sie-post-title_2-text st-m-paragraph st-d-paragraph se-rc"><i>filed in</i></p></div>
</div>
</div>
</div>
<!-- put it here -->
<video class="video" src="https://photoform.com.au/wp-content/uploads/sites/18934/2022/04/PhotoformLogo.mp4" muted="" autoplay="" loop="" width="2400px">
</video>
<div id="post-meta(1)" data-bid="post-meta" class="sb sib-post-meta sb-nm-dH sb-nd-dH" style="height: 965.039px;" data-dh-d="719" data-dh-m="823.5"><div class="ss-s ss-bg"><div class="sc" style="width: 375px;"><div data-sid="post-meta_0" class="sie-post-meta_0 se" data-si-dynamic="1" style="height: auto; transform: scale(1.17188) translate(23.4667px, 61.1233px);"><div class="se-t sie-post-meta_0-text st-m-paragraph st-d-paragraph se-wpt se-rc se-wpt-pc" style="position: relative;">
<p></p>
That way the styling of those div containers wont affect it and it will inherit it’s properties from the body of the document, allowing you to center it across the page like the navigation bar and header “Photoform Blog” do.
If you don’t know HTML and CSS, freeCodeCamp has some basic curriculum you could go through to learn it, and it would eventually help you with situations like these! 
(I am just a user/student of the site and have no other or official affiliation with it 
)
Thank you. But I’m embedding it into an HTML box on the Wordpress page, I don’t know how I ‘put it here’?
This is where the code is going atm. I’m not sure how I ‘put it on its own between’ those 2 pieces of code?
So you’re using a drag & drop website builder kind of tool… I see.
I am not familiar with that tool. I write code from scratch so that I have finer control over the layout and design.
The fCC site is about learning how to code things from scratch and helping others with their coding issues and projects.
Since you are using a Drag and Drop tool and don’t know the concepts of HTML/CSS, there is going to be a language barrier between us in that regard, and anything I say is not going to make sense if you don’t have a certain base knowledge.
Have you looked here?
or have you tried contacting “ShowIt” support?
Next time, please bore us with the details.
It didn’t dawn on me until now that you aren’t writing code from scratch and don’t know how to modify the source code files.
I’ve noticed that you’ve posted 4 other questions about how to do something in Showit over the past 9 months. I just wanted to point out that the main focus of this forum is for users of the site who are struggling or are stuck and need help with a lesson challenge or project they are working on.
I don’t know if you’ve looked into or are working through any of the site’s curriculum or not. However, I do think it would benefit you to at least learn some basic HTML/CSS concepts. And how to at least open and modify HTML CSS source files (which are plain text files) and the basic elements of HTML and basic properties/values of CSS. You don’t have to go full fledged programmer beast mode. It doesn’t have to be here, although this site is welcoming to all who want to learn to code on any level, not just aspiring programmers.
It’s not really supposed to be a technical support type of forum for people who aren’t wanting or can’t take the time to learn anything, or a vendor specific technical support forum.
In the past 9 months, you could’ve already learned many things with just a few hours a week investment.
If you’re unwilling, can’t take, or don’t have the time to learn some basic stuff, then why not contact Showit support for these issues? Or drop them a line about possibly creating some user forums for their customers on their site like every other software company does.
As far as I understand, Showit is a subscription based tool/service paid monthly. Support is part of what you’re paying for, since you decided to go the “black box” commercial product route to avoid having to learn to code or hiring a web developer in the first place.
A lot, if not most, of the users of freeCodeCamp are just regular people of all ages from around the world who are are using this great free resource to learn to code on their own time. Whether because they have aspirations to get a job as a developer, or simply for personal enrichment or for whatever other reason.
It would have been nice to know upfront what Showit was from the get go. And I think you’d be better off in the long run just learning some general web development stuff on your own and then asking questions about that, than trying to use this forum as your own personal Showit support forum.
Sorry, don’t take any of this the wrong way. I really am not trying to be rude here. On the contrary, in fact, I am trying to encourage you to at least learn a little bit more so you have a working knowledge of the web technologies and can be a little more self-reliant.
The thing about drag and drop site builder tools is… they are all fine and great until, as you’ve discovered, they don’t do exactly what you want or expect or you run into some limitation. And if you have very little knowledge of how things work behind the scenes, then you can easily get into a bind, even for things that seem like they should be simple and straightforward.
They’re easy to use to get a site up and running quickly, but they are only as good as the developers of the tool designed them to be. That’s where at least some knowledge of HTML & CSS is very helpful, to get around the limitations a tool like that might have.
Coding a site fully from scratch and using site builder tools each have their pros and cons. There’s no reason why you couldn’t do a little bit of both though if these kinds of issues keep popping up.
That said, here’s another link that may be helpful:
The concept there should also apply to video.
Again, I’m not trying to be rude. And it’s not that I don’t want or am unwilling to help, it’s just difficult since it seems that you don’t know how to modify source and I really don’t know that Showit site builder tool.
You’d probably get issues like this resolved quicker by contacting Showit support.
Best Regards!
Thank you! Sorry I thought I had mentioned it was through Showit.
When I mentioned ‘bore you with the details’ though, I was referring as to why I was using a code box to embed the video and not a WP video embed.
The reason was I wanted the video box stripped of controls, auto playing and mute.
Yes, I understand.
The last time I used Wordpress was well over 10yrs ago. So I am no longer familiar with it.
Wordpress and Showit each add another layer of complexity (to the backend they are designed to abstract the user from). This is because they each add their own code to the .html and .css source files that you then have to sift through when trying to edit the source directly.
And editing the source directly is what you’re probably going to have to do anytime either of those tools don’t provide a way to do something via their “no code, no knowledge, so easy even grandma can do it!” interface.
What you want to do can be done. But as you’ve stated earlier
You have next to no knowledge of HTML/CSS.
It’s kind of ironic that your blog post seems to be a quick tutorial about how to overcome a limitation of a website builder tool (Showit) to embed a video by using a Wordpress HTML block instead.
But you have a specific vision of how you want it aligned on the page (centered relative to something on the page or the page itself) which you still haven’t specified or clarified (so all I could do was make a guess). It would most likely require editing the source code in the .html and .css files. Yet you yourself don’t know how to do that.
Sorry, but I can’t resist finding humor in that (writing a tutorial to teach people how to do something, that you yourself don’t know how to do). lol
Most small business owners and bloggers are faced with these options:
I’ve owned a small for-profit business in the past, so I know where you’re coming from.
But it’s unrealistic to expect other people to help you run or manage your business or blog website for free if you can’t or don’t want to put any time or effort into learning some stuff on your own.
“Give a man a fish and he will eat for a day. Teach a man how to fish and you feed him for a lifetime.”
Meaning:
It can be more beneficial in the long run to teach a person how to do something than to do that something for them.
(and if he doesn’t like that, then just give him a google map link with directions to the nearest seafood restaurant where he can pay someone to prepare him a nice fish dinner) 
Here’s some sites I found that explain how to edit Wordpress code…
How to Edit WordPress Code (HTML, CSS, PHP, JavaScript)
How to Edit HTML in WordPress Code Editor (Beginner’s Guide)
How to Edit WordPress Code – HTML, CSS, PHP (Easy Guide)
…and here’s some docs regarding HTML and CSS:
MDN - Getting started with the Web
MDN - Structuring the web with HTML
MDN - Learn to style HTML using CSS
w3Schools
You might want to look through those and bookmark any of them that seem useful to you.
Just be very careful when editing. If you’re not sure what you’re doing, you can easily break your site/site layout.
I strongly advise to make a backup of your site first before making any changes, so that if something breaks, you can easily restore it.
Hope that helps!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
