VideoPress for WordPress
(This is a sponsored post.)
The leade here is that VideoPress makes video on WordPress way better. VideoPress is a part of Jetpack. And now, if VideoPress is the only thing you care about from the Jetpack world, you can pay for it à la carte as low as $4.77/month. Or, get it included in the Jetpack Complete plan.
Lemme get into it, so you can see all of what VideoPress does for you.
Optimized, CDN-Hosted Video
When you drag-and-drop a video file onto the WordPress editor (even without VideoPress), it will upload and display just like an image will. Video files are generally much larger files than images, so right off the bat, you might run into file size limits. Your WordPress host likely limits upload size between 4-128 MB. Video can easily be bigger than that. With VideoPress you’ve got up to 5 GB per file to work with (although they recommend 1 GB or lower for the best uploading success). You get 1 TB of total storage.
Even if you manage to host hundreds-of-megabyte video files yourself, that’s a heck of a lot of bandwidth for your own servers to be serving. Video is really meant to be served from servers tuned for video distribution, which is exactly what you get on VideoPress. It’s kind of like having your own personal YouTube or Vimeo, where the videos become embeds that come from a host service rather than hosted yourself, which is particularly ideal for video.
For performance reasons alone, VideoPress is worth it. You likely know that images are hard. Between WordPress and Jetpack, image handling on your website is extremely good (images are optimized, CDN-hosted, served with srcset/sizes, lazy-loaded, etc.). VideoPress makes video handling extremely good with the same features as well as some features really unique to video, like streaming video with adaptive bitrate streaming optimized for mobile.
Feature-Rich, Add-Free, Customizeable Player
So in a way, yes, you get a video player that is like what you’d get with YouTube. You get additional features like playback speed control, picture-in-picture, full-screen, volume control, etc.
That’s a lot better than a native element that you get by default. But unlike a YouTube player, there is no ads, potentially showing things you don’t want your visitors seeing on your site.
Here’s an example
In an extremely meta move, here’s an embedded VideoPress video of Dave and I talking… about VideoPress:
That video is just over 1 GB as I uploaded it!
Mobile “Posters”
With the native HTML tag, on mobile browsers, you see literally nothing in the space the video renders unless you provide an image poster attribute on the video. That’s… fine, but it’s an awful lot of work to have to hand-craft an image for every video you ever post anywhere. I’d much rather have the video automatically show the first frame or some computer-chosen frame. You get that with VideoPress, so your videos on mobile look much nicer without having to do any work.
This seems like a tiny thing, but to me it’s not. I really like having a zero-effort way to make videos on mobile look good by default. The play button is maybe a little enormous but I’ll live.
There is nothing to learn
You just flip the switch to turn it on.
Then with videos you upload, VideoPress takes over and does its thing. Your videos are uploaded to the VideoPress cloud for serving from there, but also uploaded to your WordPress media library, so you’ll always have the canonical version.
Here’s how it works:
Shortcodes
Another neat tidbit: once the video uploads, VideoPress generates a shortcode you can use to plop the video anywhere.
It’s available with a Jetpack Complete plan or à la carte.
You can start using VideoPress right away if you already have a Jetpack Complete plan. Or, it’s available as an à la carte offering at just an $4.77 per month.
If you go for the Jetpack Complete plan you’ll also gain access to a ton more goodies, like real-time site backups, automated security scans, A complete CRM, spam protection, and Jetpack Search — all of which we use right here on CSS-Tricks.
The post VideoPress for WordPress appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
