What Types of Video Content Can I Upload to Wordpress
Featuring video on your site can exist a powerful mode to show – and not merely 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 exist indeed powerful in numerous ways.
A good example is that videos have the highest shares and engagement right upwardly there beside photos. In fact, 54% of consumers want to run across more video content.
On summit of that, 8 out of 10 people accept purchased a slice 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 yous accept a fantastic thought for a video, or you've got one already, how practise 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 Divers
- Uploading and Adding Video File Types to WordPress
- What Settings Should You Apply?
- Self Hosted vs Hosted Videos
- Uploading Videos to WordPress
- Uploading Videos to the Media Library
- Advice From Our In-Business firm Video Skillful Joshua Dailey
- Encoding Your Videos for Multiple Devices
- Displaying Responsive Videos in WordPress
- Summary
Mutual Video Terms Defined
Before we swoop correct into how videos piece of work with WordPress, it might be helpful to starting time go through the mutual definitions when it comes to videos. In item, understanding the terms used when uploading and displaying videos on your site tin can help eliminate confusion.
And if y'all remember you lot 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, and so length in the form of a ratio.
For example, a mutual aspect ratio issixteen:nine, where 16 units is for the width of the video or image and nine units is the length.
Resolution – Information technology'due south another discussion for the quality of the video image and tin be measured in pixels per inch (PPI) or more unremarkably, 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 paradigm or video. A higher DPI or PPI means a college resolution and better quality. The standard for high quality (HQ) video is 300 PPI.
When it comes to displaying video, resolution is ordinarily written in the form ofwidth ten height wherewidth refers to the number of horizontal pixels displayed andheight is the number of vertical pixels displayed on the screen.
When written in brusk form, it looks likeheight 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 set.
Loftier 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 accept a loftier resolution.
There are as well other resolutions that are considered high definition such every bit 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 cheque out at your favorite movie theater.
Interlaced – An older mode 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 fifty-fifty numbered lines.
If yous even so take a big box Television you bought in the 90s, videos on it volition be displayed as interlaced. It was the onetime standard for videos.

Progressive Browse – This is the new standard for videos. Video signals display each horizontal line for a richer and more high quality picture, different the interlaced alternate which displays every other line.
If you bought a apartment screen TV or monitor since they have been outset fabricated, so you lot'll ain 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 similar a photograph. When you string each frame together, you get a moving motion-picture show 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 yous have a video that's 30 FPS or more, information technology's considered HD.
Bitrate – This indicates the corporeality of data that'due south transferred per 2d when a video is being uploaded, usually measured in megabits per 2nd (mbps) or kilobits per second (kbps).
If you lot discover a video host that uploads videos with a bitrate of less than g kbps, it's best to search for another host since the upload process will be too deadening for well-nigh people.
Compression – While this term can apply to more just videos, in this case, it means decreasing the amount of data a video file holds.
Information technology's a great idea to compress your videos because they will upload to your site or your video hosting quicker. If you cull to permit 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 lot 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 pinch 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 nearly commonly a method of compressing and decompressing videos. It's too known as a container.
A software that compresses videos is too frequently referred to equally a codec if it tin both compress and decompress videos. If it tin only compress videos is commonly referred to as an encoder and a software that simply 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 ane extension to another for viewing on different devices and browsers.
For example, converting a video file calledmyvideo.mov tomyvideo.mp4 allows the video to be uploaded and played on a WordPress site.
Since different browsers and mobile devices take different kinds of video file formats, encoding your videos can assist ensure your videos are viewable to all your visitors no thing how they choose to view your video.
Uploading and Adding Video File Types to WordPress
Speaking of encoding, at that place are certain video file extensions that WordPress lets you lot upload by default.
- .MP4, .M4V (MPEG-four)
- .MOV (QuickTime)
- .WMV (Windows Media Video)
- .AVI
- .MPG
- .OGV (Ogg)
- .3GP (3GPP)
- .3G2 (3GPP2)
There are many files types which aren't accustomed past default for security reasons. If you don't demand a file type that'due south not accepted by WordPress, information technology's all-time just to not use it.

If you lot 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'sfunctions.php file underwp-content > themes > your-theme.
Just remember that whatsoever changes you make to your theme'south functions.php file get erased after you install an update to your theme.
To preclude this from happening, you can create a child theme. If yous demand pointers on how to do this, check out our post How to Create a WordPress Child Theme.
Here'south the code you would need to add to include additional file types:
To add the file extension of your selection, change the discussionextension
on line 4 to the actual file extension you would like to add, then supersedemime/type
with the correct mime type which you tin find on the MIME Type List from FreeFormatter.com.
To add a second file extension, changedoc andawarding/msword to your desired extension and blazon on line six. You can as well delete this line if you only wish to add together one file blazon.
If you lot would like to remove a file type from the listing of accepted file types, while adding others, add this code instead:
You would add together information technology to the same place, to the bottom of thefunctions.php file plant underwp-content > themes > your-theme.
Just be certain to edit line eight to reflect the extension y'all want to remove. In this example, you would alterexe
to the file type y'all want eliminated.
For Multisite installs, once you lot accept added the code above to your theme, you demand to add the file extension through thesuper admin dashboard > Settings > Network Settings. Under Upload File Type, enter the extension of the file you wish to add, beingness sure that each file blazon is separated with a single infinite.
In one case you're done calculation the extensions to the listing, clickSave Changes at the bottom of the page.
You and your users can now upload the file types you lot added.
If you would prefer to avoid adding code to your theme, you lot tin can even so add the file extensions you want with the WP Add Mime Types plugin or Media Library Assistant plugins.
What Settings Should Yous Utilise?
Before you start uploading your videos, you might be wondering what kind of settings you should choose to ensure they display well. At the cease of the day, this may look different for anybody, peculiarly if yous decide to upload to a video hosting service since each one commonly has its own recommended settings.
On the other hand, if you're self-hosting your videos, a full general rule of thumb can be helpful in deciding what your settings should await like for your particular project.
These recommended from Video4Change should get you off to a practiced kickoff:
Format: MP4
Video
- Codec: H264 (High profile)
- Frame Rate: 24, 25 or thirty (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 volition result in a larger file size so if your goal is to go on things not bad and tight, choose a bitrate closer to 5000 kilobits per second.
Now you're near prepare to upload your videos.
Cocky Hosted vs Hosted Videos
Before diving into the ins and outs of adding videos to your site, information technology's important to first understand where your videos should be stored. To that cease, at that place are two options: self-hosted and hosted.
Self-hosted your videos means that they're stored on your server with your WordPress site.
Hosted pick means your videos are stored elsewhere and linked or embedded to your site.
At that place are many reasons why you would choose ane over the other and hither are some pointers to aid you make up one's mind which option is right for you:
- Do you plan on displaying many videos that are high-quality or high definition?If so, your server'south storage limit can fill fast and it may be appropriate to host your videos elsewhere.
- The kind of hosting you have gear up upward is important:
- Shared hosting– If you're able to load even one high-quality video with a big file size, consider yourself lucky. Definitely consider hosting your videos somewhere else.
- VPS hosting – Y'all may take plenty room to store quite a few videos as long as yous don't plan on continuously adding more than equally time goes on.
- Dedicated hosting – You should be adept to become and take quite a lot of room for many videos, although, depending on your set up and if you lot would like to add many videos over time, you may demand to upgrade afterward on.
- To host videos well, y'all should make sure your site and server are optimized for speed – Exist sure that your server has an ample amount of RAM and a fairly generous processor speed. The corporeality you need depends on how many videos you programme on cocky-hosting. As a full general dominion of thumb, a video that'due south 1GB in size should comfortably fit into a hosting plan that has 2 and a half gigabytes of RAM, a minimum of a dual-core processor and 1500 MB of storage space.
- Make sure y'all have enough bandwidth allotted to your hosting package – How many visitors are yous expecting? If yous think your site will blow upwards with popularity, you should consider how much bandwidth your site is immune to utilize up. The more visitors you're expecting, the more bandwidth you lot're going to need. To requite you an idea of how much bandwidth yous might demand, a one-gigabyte video played or downloaded 1000 times needs one terabyte of bandwidth (that's yard GB). If you're planning to display many loftier-quality videos with tons of visits to your site, yous should consider hosting your site somewhere other than your own server.
If your server doesn't have a lot of storage infinite, speed and bandwidth, definitely consider hosting your videos outside of your server. If y'all have lots of room on your server as well as tons of speed and allotted bandwidth, but desire to host heaps of videos with thousands of visitors, also consider hosting your videos somewhere other than your server.
On the other paw, if you have a server with tons of storage space, a few fast processors and lots of bandwidth giving you breathing room, y'all should exist able to host at least quite few high resolution videos with no issues.
If y'all're all the same non sure if you take enough resource to host your own videos, merely want to, it'due south a great idea to ask your hosting provider's customer service team. They tin all-time assistance 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 sound into WordPress. Now all it takes is just a few clicks and you're set up to become.
If you have decided to cocky host your videos, here'south how to add together them to your WordPress site.
Calculation Videos to Your Post or Folio
In the Block Editor, there is already a video block that you can merely upload your video into, and then place wherever you would like in your mail or page.

Here, y'all have an option to get your video past uploading, the Media Library, or past insterting a URL.
Since you're uploading, you would click on the Upload selection.

You lot'll choose a file, upload your media, and that'southward all.
If you adopt to use the Classic editor, in a post or page, click the Add Media push button, then click theUpload Media tab at the summit if you are not already on that tab when the inline popular-up opens.

So, click theSelect Files button that appears in the eye of the page.

Choose the video file you would like to upload and follow your computer'due south prompt.

In one case the file uploads, enter a title, caption and clarification as desired on the correct-hand side and be sure that theEmbed Media Player option is selected from theEmbed or Link drop down box under theAttachment Display Settings. It should be selected by default.
Finally, click theInsert into post button and your video volition be added to your post or page, complete with a thumbnail.
Adding a Video Playlist to a Post or Folio
If yous have uploaded two or more videos, you can create a playlist.

To do this, click theAdd Media button again, selectCreate 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 together.
If yous make a mistake, just click the the check marking on the top, right-hand corner of the icon for the video you desire to remove.
You tin also click theClear link at the lesser of the window to unselect all your choices.
Once you are washed making your selections, click each video to add together the title, caption and clarification you want on the correct for each of your videos, so click theCreate a new video playlist button at the bottom of theAttachment Details section.
At this point, you tin can edit the titles of the videos you selected, add more videos by clicking theAdd to Video Playlist menu item on the left and reverse the guild of your selected videos by clicking theReverse social club button beside thePlaylist Settings on the right.
Under the settings, at that place are 2 checkboxes:
- Evidence Video Listing – This pick displays your videos with a thumbnail.
- Evidence Images – Checking the box for this setting displays a text list of your videos.
When you're done making your selections, click theInsert video playlist button on the bottom-correct.
Final, but non least of all, exist sure to click thePublish orUpdate button on your post or folio to save your changes.
Uploading Videos to the Media Library
If you would like to upload videos, only don't want to insert them into a post right away, then y'all can do and then by going toMedia > Add New in your admin dashboard and clicking theSelect Files button. Follow your reckoner'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 consummate. On the Attachment Details inline pop-up that appears, click on theEdit More Details link at the bottom.
In one case the Edit Media folio loads, you lot can hands customize your videos settings by editing the title, adding a caption and description.
On this page, y'all should besides see an preview prototype displayed in the player preview. If you lot would like to change the prototype that appears and fix your own to display, click theFix featured paradigm link on the bottom, right-hand side of the page.
The media uploader pop-upwards window should appear where you tin can select an image from your media library.

On this page, you should besides see an preview image displayed in the player preview. If you lot would similar to change the image that appears and set your own to display, click theSet featured epitome link on the lesser, right-hand side of the folio.
The media uploader pop-up window should appear where you can select an image from your media library.
Yous tin too upload a new one past clickingUpload files > Select Files, and so following your computer'due south prompt.
Add together the title, caption, alt text and description you want, so click theSet up 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 postal service or folio at your convenience.
Just think that in social club for your videos to accept the option to be embedded into your posts and pages and really be playable with the default WordPress thespian, your video files volition demand to be encoded with the MPEG-4 codec or in other words, have the .mp4 extension.
If you would like to cull a different video thespian, other than the default one WordPress comes with, check out our mail service Complimentary WordPress Video Plugins For Avant-garde Embedding.
Advice From Our In-Business firm Video Adept 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 and then they tin make quicker, informed decisions virtually what products will best fit their needs." – Joshua Dailey

"With our tutorials, we are trying to help people go started equally apace as possible." – Joshua Dailey
Here'south Joshua'due south height x list for UI and UX all-time practices, in no particular club:
ane. Find the Right Host
It'southward important to detect one that can adapt all of your needs before y'all upload over 100 videos. Whether that'due south self-hosting, gratuitous hosting or premium hosting, make sure your host not only meets your electric current needs, but tin can and is willing to grow to meet your future needs.
Moving WPMU DEV from Vimeo to Wistia was a lot of piece of work. It was worth it, but it would take saved a lot of fourth dimension and money had nosotros establish them start. Y'all can learn more most the transitioning process in our article Why Nosotros Moved From Vimeo Pro to Wistia – And Why You Should Likewise.
2. Videos Need to be Encoded
Make sure you videos are encoded correctly. Start, for the best results, but second, for playback on all types of devices. This is something you may non initially think most if you're self-hosting your videos.
If you have simply ever used YouTube, Vimeo or Wistia, they reencode your media then your videos piece of 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 non be able to view your video depending on the browser or device they are using.
3. A World-Broad Audition Should Accept Equal Access
If your site targets users from around the world, call back that cyberspace speeds can make it near impossible for some of your users to access heavy video content. This is improving all the time, only we are far from having equal access, globally.
This doesn't mean you lot shouldn't use video since information technology'south a powerful grade of communication, just information technology does mean you should be aware of who your audience is when sharing. It'southward besides important to make sure yous're using an appropriate histrion and compression method.
4. Presentation Matters
Information technology'south like shooting fish in a barrel for your users to skip clicking on a video based on the thumbnail lone. Remember, video thumbnails thing.
v. Exam Your Videos for Performance
Try your crazy ideas merely know when they are working and when they're non. We spend a lot of time creating videos, sharing them internally and adjusting content earlier pushing them alive. This is an important pace in ensuring each fellow member in your audition has equal and full access to your videos.

six. Know Your Audience
In one case a video is published, we spend fourth dimension watching how users collaborate with our content and make even more adjustments if needed. For example, nosotros did some long, in-depth video tutorials nearly our plugins, but found brusk setup guides to be more attainable to more viewers.
Cheers to tracking viewer engagement with analytics, nosotros were able to determine what our audience prefers, especially since it's not the same beyond all businesses.
7. Continue a Close Eye On Quality
Audio done well oft goes unnoticed and audio done poorly tricks viewers into believing the whole video is trash. Be conscientious when using video as a sales tool because the quality of your videos reflects on the quality of your production or service.
8. Programme Your Video Marketing Thoroughly
Customers and end users equate the quality of your marketing to the quality of your product even if it's non an authentic reflection. Having a solid marketing strategy helps keep your end user happy with your business.
9. Videos Should be Attainable to Anybody
Co-ordinate to preliminary enquiry from the 2012 National Wellness Interview Survey an estimated 20.6 one thousand thousand adult Americans have been reported as having trouble seeing, fifty-fifty with the assistance of spectacles and contacts or are legally blind.
Gallaudet University in Washington, DC has also reported that an anywhere from ix to 22 out of every k Americans have a severe hearing impairment or are legally deafened.With these numbers in mind, it'due south of import to make certain 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 attainable.
If your videos play automatically on folio load, they aren't attainable and you should suit your settings.

Not to mention the evidently thought that videos that play automatically tin often exist startling, peculiarly when your users aren't aware of where the sound is suddenly coming from or if the volume is set up to be high. It'due south also a drain on near end user's internet nib since they need to pay for streaming videos.
It may non be a huge business organization for desktop users at home or in the function, but mobile users ofttimes accept a much smaller and limited data program with their carrier and each played video ends upward 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 dissimilar sizes from browsers to mobile devices. This tin be easily achieved with a responsive role player, a video host or some CSS.
With these tips in mind, allow'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
Equally Josh has mentioned, information technology's easy to forget that self-hosted videos require you to encode them yourself since information technology's non washed automatically, such as with the many video hosting options out there. Browsers and mobile devices often have dissimilar requirements when information technology comes to the video compression methods that are able to be displayed.
Once you lot upload your videos to your WordPress site, you can use the video shortcode to display them on a post or page. You can as well add parameters so certain video files play depending on the device your visitors use to view the folio.
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. Y'all can even type in a URL to an external source if yous nevertheless want to use the WordPress video thespian without self-hosting your videos.
To add together alternating video file options to play on unlike devices, this is the shortcode with the parameters included that yous would use:
You don't need to spend a lot of time to define the unlike devices you want to back up. Just enter in your video file source simply similar the previous instance, while also including the correct file type.
In one case your visitor starts loading the page, WordPress detects what file type the company's device supports and automatically loads that video file on the page based on that shortcode. Pretty absurd, don't y'all think?
For example, if you wanted to add a flash (.flv) video to the list, you would enter a space after the last parameter, and then add flv="myvideo.flv"
and save the page or mail service. 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 as well other options you could include other than the source file.
Adding any of the options below before or later on src
in the in a higher place examples adds dissimilar functionalities to the WordPress player.
-
poster
– Adds a specific feature image to the video histrion. Past default, this is set to none. -
loop
– Adds the functionality of automatically replaying the video on a loop. To exercise this, set it to "on" instead of its default setting which is "off." -
autoplay
– If ready to "on," your video can autoplay when the page loads. By default, this setting is set to "off" which is as well our recommendation to remain fully accessible to the hearing and visually dumb. -
preload
– Sets the data that's loaded automatically. The default is "metadata" which loads but the video'southward metadata, but you lot could choose "auto" to load everything or "none" to not load the video at all. -
elevation
– If yous want to display a different height of the video other than the default size of the uploaded video. -
width
– You tin also change the width in the aforementioned fashion if you want a different size than the original source video in your media library.
If yous're a developer and want to experiment with the code for this shortcode, y'all tin find it in themedia.php file under thewp-includes folder.
Once you have added your custom video shortcode and saved your changes, you're all gear up to go. That'due south all you lot need to do to ensure your videos play across devices and browsers. Really, that'due south it!
Displaying Responsive Videos in WordPress
With Google's new algorithm, your search ranking tin can tank quickly if your site isn't fully responsive. Google also doesn't consider sites that need yous to scroll horizontally to be responsive.
Videos can exist a huge offender for this if you're not careful and then it's of import to test out your site to brand sure it works well in both desktop browsers too as mobile ones.
Luckily, if you lot use the default WordPress histrion, your videos should be fully responsive. If y'all use one of the peak video hosting services to display your videos, you're likely good to become as well.
This can sometimes be a problem if you lot are using an untested player or an iframe to display your videos. If you choose to utilise a unlike actor, brand certain to thoroughly examination it out for responsiveness.
If you make up one's mind to display your videos with an iframe, it's important to add some extra lawmaking to ensure its responsiveness. It's important to retrieve that many video hosts such as YouTube and Vimeo requite y'all the option to embed your videos with an iframe.
Upload a re-create to your media library, and then caput over to your WordPress files. On each page file y'all use for your particular theme – or at least the type of page where yous want to display videos. For example, yous 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 peak of the page, later on all the initial folio notes.
Y'all can call the script like this:
Save your file and that's all you need to practice. This isn't necessarily the best solution since your videos aren't guaranteed to look great.
Information technology can also be a problem if your company'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 choice.
Summary
As demonstrated, videos can be a powerful, like shooting fish in a barrel 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 Piece of cake Steps and Best WordPress Video Chat Plugins – Based on Your Needs.
Tags:
Source: https://wpmudev.com/blog/video-wordpress/
Post a Comment for "What Types of Video Content Can I Upload to Wordpress"