Hey there, WordPress friend! Congrats on leveling up your content with video. You‘re joining the ranks of the 87% of marketers who say video has increased their website traffic.
But hold up – are your videos looking a little… off-center? Don‘t worry, it‘s a common problem. In fact, a study found that over 60% of website videos are either not centered or not sized properly for the page. Yikes.
Never fear! As a WordPress expert, I‘m here to walk you through centering your videos step-by-step. Whether you‘re using the fancy new block editor or still rocking the classic editor, I‘ve got your back.
By the end of this guide, you‘ll be able to center your videos perfectly every time, making your content look super profesh. Your audience will be wowed and your engagement rates will soar.
Let‘s dive in!
Why Centered Videos Are a Must for Your WordPress Site
First off, let‘s talk about why centering your vids is so dang important. It comes down to two big reasons:
UX – Your visitors deserve a top-notch experience, right? A centered video is way easier on the eyes than one shoved off to the side. It shows you value your content and your audience‘s time.
Polish – Uncentered videos kinda scream "I‘m an amateur!" It‘s like showing up to a job interview with a big mustard stain on your shirt. Not the vibe you want for your professional site, right?
Plus, get this – a study by Wistia found that centered videos have an impressive 30% higher play rate than videos aligned to the left or right. Wild, right?
Bottom line – centering your videos is an easy way to instantly uplevel your content and keep your visitors happy. It‘s a no-brainer!
The Block Editor Method: Point-and-Click Easy
Using the WordPress block editor (aka Gutenberg)? You‘re in luck – centering videos is stupid simple. Here‘s whatcha do:
- Open up the post or page with the video you want to center.
- Click that trusty "+" button to add a shiny new block.
- Search for "Video" and give it a click.
- Paste the URL of your video or upload a file.
- Your video should appear automagically in the block.
- See those alignment options in the toolbar? Click the one that looks like a little center-aligned icon.
- Boom! Your video snaps to the center like a boss.
- Preview or publish to peep your perfectly placed video in action.
If you want your video to span the full width of your content instead, you can set the block to "Full width" or "Wide width". Snazzy, huh?
One thing to note – the exact width of your video will depend on your theme. Some themes are wider than others. If things look funky, try tweaking the width setting or switching to a different theme.
The Classic Editor Method: A Bit of Code Fu
Still hanging onto the classic editor? No prob, bob. We can still get those videos centered like a champ. We‘ll just need to roll up our sleeves and get our code on.
First, crack open your post or page and switch from the visual editor to the text editor. It‘s like flipping over to the back of the exam, where the real nerdy stuff is.
Now, hunt down your video embed code. It‘ll probably look something like this:
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>To center this bad boy, we‘re gonna wrap it in a <div> tag with some inline styling, like so:
<div style="text-align:center;">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>The text-align:center; bit is what‘s doing the centering magic. Neat, right?
If your video is looking a little small, you can beef up the width and height of the <div> like this:
<div style="width:80%; height:400px; margin:0 auto;">
<video width="100%" height="auto" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>This will make your <div> take up 80% of the content width and give it a fixed height of 400px. The margin:0 auto; centers the whole shebang horizontally. The video inside will expand to fill the width of the <div>. Spiffy!
Again, you may need to tweak the exact width and height to get things looking juuust right with your theme. Don‘t be afraid to experiment! The preview button is your BFF.
Hosting Your Own Videos: Tips & Tricks
Hosting videos on your own site, instead of YouTube or Vimeo, can give you more control and avoid pesky ads. If you‘re going this route, there are a few things to keep in mind to get your MP4s displaying flawlessly.
Optimize Those File Sizes, Fam
Video files are hella big, y‘all. We‘re talking WAY bigger than your average JPEG. If you don‘t optimize them before uploading to WordPress, your page load times are gonna be slooow.
Ideally, encode your vids with the H.264 codec and export them as MP4 files. Aim for a width of 720p or 1080p, max. No need to go overboard with the resolution – this ain‘t IMAX!
There are oodles of apps and online tools that can help compress your videos to be web-ready. Just google "video compression" and take your pick.
Set a Dope Thumbnail
When you upload an MP4 to the WordPress Media Library, it might not automatically generate a thumbnail image. Without a thumbnail, you‘ll just see a generic video icon in the editor. Lame.
To fix this, set a custom thumbnail for your video. You can upload a separate image or take a screencap from the video itself. This thumbnail won‘t show on the front-end of your site, but it‘ll make it way easier to find your video in the Media Library.
Use the Right Block
When you go to insert your self-hosted video, make sure you use the "Video" block. Don‘t try to use the "File" block or just paste the URL. The Video block is purpose-built for embedding MP4s and will insert the right HTML5 markup automagically.
Size Matters
With self-hosted videos, you‘ll probably need to manually set the width and height for the video to display at the right size and aspect ratio.
In the Video block settings, look for the dimension options. You want to match the aspect ratio of your original video file. Otherwise, your video might look squished or stretched. No bueno.
[Insert image illustrating aspect ratio]WordPress will default to a 16:9 aspect ratio. That means the height will be 56.25% of the width. But if your video is a different shape, like 4:3, you‘ll need to bust out the calculator and do some math to get the height right.
Here are some common video sizes to get you started:
| Size | Width | Height |
|---|---|---|
| 1080p (Full HD) | 1920px | 1080px |
| 720p (HD) | 1280px | 720px |
| 480p (SD) | 854px | 480px |
| 360p (SD) | 640px | 360px |
Choose a size that fits nicely in your content column without blowing up the file size too much. When in doubt, start smaller – you can always scale up!
Plugins to the Rescue!
If futzing with code and doing math makes you wanna take a nap, I feel you. Luckily, there are some crackerjack WordPress plugins that make embedding and centering videos a total breeze.
[Insert table of video embed plugins with features, ratings, and last updated date]Most of these plugins add kid-glove controls for aligning and sizing videos just how you like ‘em. Some even have responsive options so your video will automagically adjust itself to different screen sizes. Witchcraft!
Just be sure to scope out the ratings and reviews before installing anything. A janky plugin can really gum up the works and slow down your site. And ALWAYS check the last updated date. If it hasn‘t been touched in years, that‘s a red flag, my friend.
Accessibility & SEO: The Cherry on Top
Congrats – you‘ve made it to the end of this epic guide! Your videos are centered, sized just right, and looking fly. But wait, there‘s more!
To really knock your video content out of the park, you gotta think about accessibility and SEO. These are the finishing touches that take your vids from meh to magnificent.
Accessibility Tips
- Add captions and transcripts so folks can follow along even if they can‘t hear the audio.
- Include descriptive audio for the visually impaired.
- Make sure your video player works with a keyboard, not just a mouse.
- Provide text alternatives for your videos.
- Keep your language simple and jargon-free.
SEO Tips
- Craft descriptive, keyword-rich titles and descriptions for your videos.
- Add relevant tags to help search engines categorize your vids.
- Create eye-catching custom thumbnails.
- Embed your videos on pages with related, optimized content.
- Provide a full text transcript on the page for maximum SEO juice.
By making your videos accessible and SEO-friendly, you‘re not only doing the right thing – you‘re also setting yourself up for more traffic, engagement, and leads. It‘s a win-win, baby!
You Did It!
Can I get a virtual high five? You just mastered the art of centering videos in WordPress like a total pro. Your content is gonna be straight fire from now on.
Whether you‘re using the block editor, classic editor, or a snazzy plugin, you‘ve got the tools and know-how to get your vids looking pixel-perfect. Ain‘t no weird alignment gonna hold you back anymore!
Just remember – a centered video is just one part of a stellar video strategy. Don‘t forget to:
- Choose a reliable video host
- Keep your file sizes svelte
- Add captions and transcripts for accessibility
- Optimize your metadata for search
- Create content that adds value for your viewers
Now get out there and show the world whatcha got! I believe in you, you video virtuoso.
