Featuring video on your site can be a powerful way to show – and not just tell – visitors what your site is all about.
Videos. They’re everywhere. Whether it be on a website, app, social media, or YouTube. They grab our attention, make us watch, and we get hooked. So yes — featuring a video on your WordPress site can be indeed powerful in numerous ways.
A good example is that videos have the highest shares and engagement right up there beside photos. In fact, 54% of consumers want to see more video content.
On top of that, 8 out of 10 people have purchased a piece of software or app after watching a video, and 88% of video marketing professionals report that they’re satisfied with the ROI of their video marketing efforts on social media.
But if you have a fantastic idea for a video, or you’ve got one already, how do you go about adding it to your site? In this definitive guide, we go through everything you need to know about video, from technical details on aspect ratios and codecs, though to self-hosted versus hosted videos, encoding videos for multiple devices, and getting started uploading videos to your WordPress site.
Let’s get started.
- Common Video Terms Defined
- Uploading and Adding Video File Types to WordPress
- What Settings Should You Use?
- Self Hosted vs Hosted Videos
- Uploading Videos to WordPress
- Uploading Videos to the Media Library
- Advice From Our In-House Video Expert Joshua Dailey
- Encoding Your Videos for Multiple Devices
- Displaying Responsive Videos in WordPress
- Summary
Common Video Terms Defined
Before we dive right into how videos work with WordPress, it might be helpful to first go through the common definitions when it comes to videos. In particular, understanding the terms used when uploading and displaying videos on your site can help eliminate confusion.
And if you think you already know video terms inside out, the definitions below may be a helpful reminder.
Aspect Ratio – This term is used most commonly for photos, TVs, and video.
It refers to the proportional size of the image or screen in width, then length in the form of a ratio.
For example, a common aspect ratio is 16:9, where 16 units is for the width of the video or image and nine units is the length.
Resolution – It’s another word for the quality of the video image and can be measured in pixels per inch (PPI) or more commonly, dots per inch (DPI). These units are used to explain how many dots of color (for printed images) or how many pixels of color (for digital content) per square inch are displayed within an image or video. A higher DPI or PPI means a higher resolution and better quality. The standard for high quality (HQ) video is 300 PPI.
When it comes to displaying video, resolution is usually written in the form of width x height where width refers to the number of horizontal pixels displayed and height is the number of vertical pixels displayed on the screen.
When written in short form, it looks like height p, or to use a common example, 1080p.
Standard Definition (SD) – A common video resolution is 640×480 or 480p and is considered standard definition. A video in standard definition appears the size of an older, mostly square TV.
High Definition (HD) – Most TVs and computer monitors made today are in 1920×1080 or also known as 1080p. The picture is clear and crisp because the monitors and screen are made for videos that have a high resolution.
There are also other resolutions that are considered high definition such as 1920×720. This also includes the aspect ratios of 2.39:1 and 1.85:1 which are considered super widescreen and are commonly used for films that you can check out at your favorite movie theater.
Interlaced – An older way for video signals to display video on a screen. Signals send horizontal lines of the video to the screen which together form the moving images. Interlaced videos display every other horizontal line and switch between odd and even numbered lines.
If you still have a big box TV you bought in the 90s, videos on it will be displayed as interlaced. It was the old standard for videos.
Progressive Scan – This is the new standard for videos. Video signals display each horizontal line for a richer and more high quality picture, unlike the interlaced alternate which displays every other line.
If you bought a flat screen TV or monitor since they have been first made, then you’ll own a screen that displays videos with a progressive scan.
Frame Rate – This is the speed at which a sensor captures video in a second. A single frame looks like a photograph. When you string each frame together, you get a moving picture or in other words, a video.
Frames Per Second (FPS) – This term is used to describe the number of frames used per second of a video. Common FPS include 24, 25, 29.97, 30 and 50. When you have a video that’s 30 FPS or more, it’s considered HD.
Bitrate – This indicates the amount of data that’s transferred per second when a video is being uploaded, usually measured in megabits per second (mbps) or kilobits per second (kbps).
If you find a video host that uploads videos with a bitrate of less than 1000 kbps, it’s best to search for another host since the upload process will be too slow for most people.
Compression – While this term can apply to more than just videos, in this case, it means decreasing the amount of data a video file holds.
It’s a great idea to compress your videos because they will upload to your site or your video hosting quicker. If you choose to let users download your video, this will also be a lot faster.
Each video hosting service may have different compression guidelines and suggestions so it may be worth looking into if you choose to host your videos outside of your WordPress site.
Lossy – When you are compressing a video file, a lossy compression means the quality of the video decreases when compared to the original file. Despite the lesser quality, a lossy compression usually results in a smaller file size.
Lossless – This would be the opposite of lossy when you are compressing a video file. While lossless compression means the original file and compressed file have the same video quality, this usually results in a larger file size when compared to lossy compressed files.
Codec – This is most commonly a method of compressing and decompressing videos. It’s also known as a container.
A software that compresses videos is also often referred to as a codec if it can both compress and decompress videos. If it can only compress videos is commonly referred to as an encoder and a software that only decompresses is usually called a decoder.
Common codecs include H.264/MPEG-4, VP6 and WMV.
Encoding – This describes the process of taking an original (source) video file and converting it from one extension to another for viewing on different devices and browsers.
For example, converting a video file called myvideo.mov to myvideo.mp4 allows the video to be uploaded and played on a WordPress site.
Since different browsers and mobile devices accept different kinds of video file formats, encoding your videos can help ensure your videos are viewable to all your visitors no matter how they choose to view your video.
Uploading and Adding Video File Types to WordPress
Speaking of encoding, there are certain video file extensions that WordPress lets you upload by default.
- .MP4, .M4V (MPEG-4)
- .MOV (QuickTime)
- .WMV (Windows Media Video)
- .AVI
- .MPG
- .OGV (Ogg)
- .3GP (3GPP)
- .3G2 (3GPP2)
There are many files types which aren’t accepted by default for security reasons. If you don’t need a file type that’s not accepted by WordPress, it’s best just to not use it.
If you would still like to let you and your users upload more file types that aren’t allowed by default, you can do so by adding some code to the bottom of your theme’s functions.php file under wp-content > themes > your-theme.
Just remember that any changes you make to your theme’s functions.php file get erased after you install an update to your theme.
To prevent this from happening, you can create a child theme. If you need pointers on how to do this, check out our post How to Create a WordPress Child Theme.
Here’s the code you would need to add to include additional file types:
To add the file extension of your choice, change the word extension on line four to the actual file extension you would like to add, then replace mime/type with the correct mime type which you can find on the MIME Type List from FreeFormatter.com.
To add a second file extension, change doc and application/msword to your desired extension and type on line six. You can also delete this line if you only wish to add one file type.
If you would like to remove a file type from the list of accepted file types, while adding others, add this code instead:
You would add it to the same place, to the bottom of the functions.php file found under wp-content > themes > your-theme.
Just be sure to edit line eight to reflect the extension you want to remove. In this example, you would change exe to the file type you want eliminated.
For Multisite installs, once you have added the code above to your theme, you need to add the file extension through the super admin dashboard > Settings > Network Settings. Under Upload File Type, enter the extension of the file you wish to add, being sure that each file type is separated with a single space.
Once you’re done adding the extensions to the list, click Save Changes at the bottom of the page.
You and your users can now upload the file types you added.
If you would prefer to avoid adding code to your theme, you can still add the file extensions you want with the WP Add Mime Types plugin or Media Library Assistant plugins.
What Settings Should You Use?
Before you start uploading your videos, you might be wondering what kind of settings you should choose to ensure they display well. At the end of the day, this may look different for everyone, especially if you decide to upload to a video hosting service since each one usually has its own recommended settings.
On the other hand, if you’re self-hosting your videos, a general rule of thumb can be helpful in deciding what your settings should look like for your particular project.
These recommended from Video4Change should get you off to a good start:
Format: MP4
Video
- Codec: H264 (High profile)
- Frame Rate: 24, 25 or 30 (Constant)
- Frame Size / Resolution: 1280 x 720 (720p)
- Fields: Progressive
- Bitrate: 5000 – 10000 kbps
Audio
- Codec: AAC-LC
- Bitrate: 320 kbit/s
- Sample Rate: 44.100 OR 48,000 kHz (retain original sample rate)
Just keep in mind that a higher bitrate will result in a larger file size so if your goal is to keep things neat and tight, choose a bitrate closer to 5000 kilobits per second.
Now you’re almost ready to upload your videos.
Self Hosted vs Hosted Videos
Before diving into the ins and outs of adding videos to your site, it’s important to first understand where your videos should be stored. To that end, there are two options: self-hosted and hosted.
Self-hosted your videos means that they’re stored on your server with your WordPress site.
Hosted option means your videos are stored elsewhere and linked or embedded to your site.
There are many reasons why you would choose one over the other and here are some pointers to help you determine which option is right for you:
- Do you plan on displaying many videos that are high-quality or high definition? If so, your server’s storage limit can fill up fast and it may be appropriate to host your videos elsewhere.
- The kind of hosting you have set up is important:
- Shared hosting – If you’re able to load even one high-quality video with a large file size, consider yourself lucky. Definitely consider hosting your videos somewhere else.
- VPS hosting – You may have enough room to store quite a few videos as long as you don’t plan on continuously adding more as time goes on.
- Dedicated hosting – You should be good to go and have quite a lot of room for many videos, although, depending on your set up and if you would like to add many videos over time, you may need to upgrade later on.
- To host videos well, you should make sure your site and server are optimized for speed – Be sure that your server has an ample amount of RAM and a fairly generous processor speed. The amount you need depends on how many videos you plan on self-hosting. As a general rule of thumb, a video that’s 1GB in size should comfortably fit into a hosting plan that has two and a half gigabytes of RAM, a minimum of a dual-core processor and 1500 MB of storage space.
- Make sure you have enough bandwidth allotted to your hosting package – How many visitors are you expecting? If you think your site will blow up with popularity, you should consider how much bandwidth your site is allowed to use up. The more visitors you’re expecting, the more bandwidth you’re going to need. To give you an idea of how much bandwidth you might need, a one-gigabyte video played or downloaded 1000 times needs one terabyte of bandwidth (that’s 1000 GB). If you’re planning to display many high-quality videos with tons of visits to your site, you should consider hosting your site somewhere other than your own server.
If your server doesn’t have a lot of storage space, speed and bandwidth, definitely consider hosting your videos outside of your server. If you have lots of room on your server as well as tons of speed and allotted bandwidth, but want to host heaps of videos with thousands of visitors, also consider hosting your videos somewhere other than your server.
On the other hand, if you have a server with tons of storage space, a few fast processors and lots of bandwidth giving you breathing room, you should be able to host at least quite few high resolution videos with no problems.
If you’re still not sure if you have enough resources to host your own videos, but want to, it’s a great idea to ask your hosting provider’s customer service team. They can best help you sort out the best option for your specific needs.
Uploading Videos to WordPress
With the introduction of Gutenberg, it’s never been easier to upload a video and audio into WordPress. Now all it takes is just a few clicks and you’re ready to go.
If you have decided to self host your videos, here’s how to add them to your WordPress site.
Adding Videos to Your Post or Page
In the Block Editor, there is already a video block that you can simply upload your video into, and then place wherever you would like in your post or page.
Here, you have an option to get your video by uploading, the Media Library, or by insterting a URL.
Since you’re uploading, you would click on the Upload option.
You’ll choose a file, upload your media, and that’s all.
If you prefer to use the Classic editor, in a post or page, click the Add Media button, then click the Upload Media tab at the top if you are not already on that tab when the inline pop-up opens.
Then, click the Select Files button that appears in the middle of the page.
Choose the video file you would like to upload and follow your computer’s prompt.
Once the file uploads, enter a title, caption and description as desired on the right-hand side and be sure that the Embed Media Player option is selected from the Embed or Link drop down box under the Attachment Display Settings. It should be selected by default.
Finally, click the Insert into post button and your video will be added to your post or page, complete with a thumbnail.
Adding a Video Playlist to a Post or Page
If you have uploaded two or more videos, you can create a playlist.
To do this, click the Add Media button again, select Create Video Playlist from the menu on the left hand side of the pop-up, then click on the icons for the videos you want to add.
If you make a mistake, just click the the check mark on the top, right-hand corner of the icon for the video you want to remove.
You can also click the Clear link at the bottom of the window to unselect all your choices.
Once you are done making your selections, click each video to add the title, caption and description you want on the right for each of your videos, then click the Create a new video playlist button at the bottom of the Attachment Details section.
At this point, you can edit the titles of the videos you selected, add more videos by clicking the Add to Video Playlist menu item on the left and reverse the order of your selected videos by clicking the Reverse order button beside the Playlist Settings on the right.
Under the settings, there are two checkboxes:
- Show Video List – This option displays your videos with a thumbnail.
- Show Images – Checking the box for this setting displays a text list of your videos.
When you’re done making your selections, click the Insert video playlist button on the bottom-right.
Last, but not least of all, be sure to click the Publish or Update button on your post or page to save your changes.
Uploading Videos to the Media Library
If you would like to upload videos, but don’t want to insert them into a post right away, then you can do so by going to Media > Add New in your admin dashboard and clicking the Select Files button. Follow your computer’s prompts to select and upload a video.
Once the upload has been completed, click on the file’s icon which appears on the page after the loading bar appears to complete. On the Attachment Details inline pop-up that appears, click on the Edit More Details link at the bottom.
Once the Edit Media page loads, you can easily customize your videos settings by editing the title, adding a caption and description.
On this page, you should also see an preview image displayed in the player preview. If you would like to change the image that appears and set your own to display, click the Set featured image link on the bottom, right-hand side of the page.
The media uploader pop-up window should appear where you can select an image from your media library.
On this page, you should also see an preview image displayed in the player preview. If you would like to change the image that appears and set your own to display, click the Set featured image link on the bottom, right-hand side of the page.
The media uploader pop-up window should appear where you can select an image from your media library.
You can also upload a new one by clicking Upload files > Select Files, then following your computer’s prompt.
Add the title, caption, alt text and description you want, then click the Set featured image button at the button, right-hand corner.
Finally, click the Update button and your new featured image and other changes should save. Your video is now ready to be added to a post or page at your convenience.
Just remember that in order for your videos to have the option to be embedded into your posts and pages and actually be playable with the default WordPress player, your video files will need to be encoded with the MPEG-4 codec or in other words, have the .mp4 extension.
If you would like to choose a different video player, other than the default one WordPress comes with, check out our post Free WordPress Video Plugins For Advanced Embedding.
Advice From Our In-House Video Expert Joshua Dailey
I asked our videographer Joshua Dailey his advice when working with video, and in particular what advice he would give to businesses working with video.
Joshua directs, writes and scripts the product videos here at WPMU DEV and has help from other talented videographers on our team.
“We are working to give users a better understanding of WPMU DEV products and WordPress so they can make quicker, informed decisions about what products will best fit their needs.” – Joshua Dailey
“With our tutorials, we are trying to help people get started as quickly as possible.” – Joshua Dailey
Here’s Joshua’s top 10 list for UI and UX best practices, in no particular order:
1. Find the Right Host
It’s important to find one that can accommodate all of your needs before you upload over 100 videos. Whether that’s self-hosting, free hosting or premium hosting, make sure your host not only meets your current needs, but can and is willing to grow to meet your future needs.
Moving WPMU DEV from Vimeo to Wistia was a lot of work. It was worth it, but it would have saved a lot of time and money had we found them first. You can learn more about the transitioning process in our article Why We Moved From Vimeo Pro to Wistia – And Why You Should Too.
2. Videos Need to be Encoded
Make sure you videos are encoded correctly. First, for the best results, but second, for playback on all types of devices. This is something you may not initially think about if you’re self-hosting your videos.
If you have only ever used YouTube, Vimeo or Wistia, they reencode your media so your videos work on all types of devices – in all types of browsers. When self-hosting you may need to store multiple versions of the same video in different formats or you may not be able to view your video depending on the browser or device they are using.
3. A World-Wide Audience Should Have Equal Access
If your site targets users from around the world, remember that internet speeds can make it near impossible for some of your users to access heavy video content. This is improving all the time, but we are far from having equal access, globally.
This doesn’t mean you shouldn’t use video since it’s a powerful form of communication, but it does mean you should be aware of who your audience is when sharing. It’s also important to make sure you’re using an appropriate player and compression method.
4. Presentation Matters
It’s easy for your users to skip clicking on a video based on the thumbnail alone. Remember, video thumbnails matter.
5. Test Your Videos for Performance
Try your crazy ideas but know when they are working and when they’re not. We spend a lot of time creating videos, sharing them internally and adjusting content before pushing them live. This is an important step in ensuring each member in your audience has equal and full access to your videos.
6. Know Your Audience
Once a video is published, we spend time watching how users interact with our content and make even more adjustments if needed. For example, we did some long, in-depth video tutorials about our plugins, but found short setup guides to be more accessible to more viewers.
Thanks to tracking viewer engagement with analytics, we were able to determine what our audience prefers, especially since it’s not the same across all businesses.
7. Keep a Close Eye On Quality
Audio done well often goes unnoticed and audio done poorly tricks viewers into believing the whole video is trash. Be careful when using video as a sales tool because the quality of your videos reflects on the quality of your product or service.
8. Plan Your Video Marketing Thoroughly
Customers and end users equate the quality of your marketing to the quality of your product even if it’s not an accurate reflection. Having a solid marketing strategy helps keep your end user happy with your business.
9. Videos Should be Accessible to Everyone
According to preliminary research from the 2012 National Health Interview Survey an estimated 20.6 million adult Americans have been reported as having trouble seeing, even with the aid of glasses and contacts or are legally blind.
Gallaudet University in Washington, DC has also reported that an anywhere from nine to 22 out of every 1000 Americans have a severe hearing impairment or are legally deaf.With these numbers in mind, it’s important to make sure your videos are accessible to individuals who can identify as having these impairments.
Uploading closed captioning documents to your videos helps those who are hearing impaired to view your videos with ease. Similarly, including a transcript of your videos assists those who are visually impaired to access your videos.
Making sure your video player includes keyboard navigation and support for screen readers are also important. All videos should play only when the play button is clicked or otherwise accessed with a keyboard to be considered accessible.
If your videos play automatically on page load, they aren’t accessible and you should adjust your settings.
Not to mention the plain idea that videos that play automatically can often be startling, especially when your users aren’t aware of where the sound is suddenly coming from or if the volume is set to be high. It’s also a drain on most end user’s internet bill since they need to pay for streaming videos.
It may not be a huge concern for desktop users at home or in the office, but mobile users often have a much smaller and limited data plan with their carrier and each played video ends up costing them. This is why you should consider leaving out your video backgrounds, if only for mobile themes, as well as eliminate videos which play automatically.
10. Responsive Design and Style
Part of keeping your videos accessible to all your users is making sure that they’re responsive on screens of different sizes from browsers to mobile devices. This can be easily achieved with a responsive player, a video host or some CSS.
With these tips in mind, let’s look at how you can embed videos that are encoded across multiple devices and how to make your videos responsive for self-hosted videos.
Encoding Your Videos for Multiple Devices
As Josh has mentioned, it’s easy to forget that self-hosted videos require you to encode them yourself since it’s not done automatically, such as with the many video hosting options out there. Browsers and mobile devices often have different requirements when it comes to the video compression methods that are able to be displayed.
Once you upload your videos to your WordPress site, you can use the video shortcode to display them on a post or page. You can also add parameters so certain video files play depending on the device your visitors use to view the page.
Here’s what the shortcode looks like with a single video attached:
To use this shortcode, you would just need to change myvideo.mp4 to the source video in your media library. You can even type in a URL to an external source if you still want to use the WordPress video player without self-hosting your videos.
To add alternate video file options to play on different devices, this is the shortcode with the parameters included that you would use:
You don’t need to spend a lot of time to define the different devices you want to support. Just enter in your video file source just like the previous example, while also including the correct file type.
Once your visitor starts loading the page, WordPress detects what file type the visitor’s device supports and automatically loads that video file on the page based on that shortcode. Pretty cool, don’t you think?
For example, if you wanted to add a flash (.flv) video to the list, you would enter a space after the last parameter, then add flv="myvideo.flv" and save the page or post. Don’t forget to change myvideo.flv to your actual video file listed in your media library or URL to the external source.
The file types you can use with the video shortcode are: .MP4, .M4v, .WEBM, .OGV, .WMV, .FLV
There are also other options you could include other than the source file.
Adding any of the options below before or after src in the above examples adds different functionalities to the WordPress player.
poster– Adds a specific feature image to the video player. By default, this is set to none.loop– Adds the functionality of automatically replaying the video on a loop. To do this, set it to “on” instead of its default setting which is “off.”autoplay– If set to “on,” your video can autoplay when the page loads. By default, this setting is set to “off” which is also our recommendation to remain fully accessible to the hearing and visually impaired.preload– Sets the data that’s loaded automatically. The default is “metadata” which loads only the video’s metadata, but you could choose “auto” to load everything or “none” to not load the video at all.height– If you want to display a different height of the video other than the default size of the uploaded video.width– You can also change the width in the same way if you want a different size than the original source video in your media library.
If you’re a developer and want to experiment with the code for this shortcode, you can find it in the media.php file under the wp-includes folder.
Once you have added your custom video shortcode and saved your changes, you’re all ready to go. That’s all you need to do to ensure your videos play across devices and browsers. Really, that’s it!
Displaying Responsive Videos in WordPress
With Google’s new algorithm, your search ranking can tank quickly if your site isn’t fully responsive. Google also doesn’t consider sites that need you to scroll horizontally to be responsive.
Videos can be a huge offender for this if you’re not careful so it’s important to test out your site to make sure it works well in both desktop browsers as well as mobile ones.
Luckily, if you use the default WordPress player, your videos should be fully responsive. If you use one of the top video hosting services to display your videos, you’re likely good to go as well.
This can sometimes be a problem if you are using an untested player or an iframe to display your videos. If you choose to use a different player, make sure to thoroughly test it out for responsiveness.
If you decide to display your videos with an iframe, it’s important to add some extra code to ensure its responsiveness. It’s important to remember that many video hosts such as YouTube and Vimeo give you the option to embed your videos with an iframe.
Upload a copy to your media library, then head over to your WordPress files. On each page file you use for your particular theme – or at least the type of page where you want to display videos. For example, you can add this script to your /wp-content/themes/your-theme/page.php file to be able to display responsive videos embedded with iframes on your WordPress pages.
Edit the file and call the script toward the top of the page, after all the initial page notes.
You can call the script like this:
Save your file and that’s all you need to do. This isn’t necessarily the best solution since your videos aren’t guaranteed to look great.
It can also be a problem if your visitor’s browser fails to load the script. This is why using a player or embed option you know is fully responsive is often the safest option.
Summary
As demonstrated, videos can be a powerful, easy to enhance your viewers experience to your WordPress site.
To learn interesting ways to integrate video into your site check out some of our other posts: Using Appointments + to Setup and Streamline Client Consultations, How to Add a Video Background to Your WordPress Site in 4 Easy Steps and Best WordPress Video Chat Plugins – Based on Your Needs.
Tags:
