Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Uploading videos to WordPress

From: Create an Online Portfolio with WordPress

Video: Uploading videos to WordPress

Now you know how to upload videos to YouTube and other video sharing sites and then embed it into your site. But what if you don't want to use one of these sharing sites? There can be many reasons for that. Maybe you just want more control or maybe you don't like what those sites do to your videos. If that's the case, you can upload your videos directly to your site as well. However, there are some big caveats that come with it. Most importantly, that if you put a video on your website then you're responsible for feeding it out to the world, meaning if a lot of people are watching the video at the same time, it will be very taxing on your server and it might first of all reduce performance and the second of all cost you a lot of money.

Uploading videos to WordPress

Now you know how to upload videos to YouTube and other video sharing sites and then embed it into your site. But what if you don't want to use one of these sharing sites? There can be many reasons for that. Maybe you just want more control or maybe you don't like what those sites do to your videos. If that's the case, you can upload your videos directly to your site as well. However, there are some big caveats that come with it. Most importantly, that if you put a video on your website then you're responsible for feeding it out to the world, meaning if a lot of people are watching the video at the same time, it will be very taxing on your server and it might first of all reduce performance and the second of all cost you a lot of money.

But if you're okay with that and you're well aware and informed about the catches, I'll show you how to do it. If we go to Videos, we can click Add new video and create a new video. So I'll say Locally hosted video. Here on the Upload/Insert bar next to Images there is one that says Add video. From here you can theoretically upload videos. However, what you will often see is this: Maximum upload file size and then a really low number.

The default for BitNami and most of these locally hosted systems is around 2 to 8 MB. And you very rarely find a server that will allow you to upload more than 8 MB. But that can be changed in one of several ways. If you access to the PHP installation yourself, then you can manually change it. And I'll show you how to do that in just one second. If you don't have access to that, you may have access to your file called .HTaccess where you can set new values for, for instance upload size.

If you want to do that, you need to contact your host and ask them how to do it or go to their website, because this varies greatly depending on where your site is hosted. But like I said, if you have access to your php installation you can change this manually. So I'll go to where BitNami is installed on my computer and here I find PHP. Now this will vary if you're not using AMP, if you're using WAMP or MAMP. It will be located in a different place, but you will find PHP somewhere on your computer.

Under the php folder there is a file called php.ini. This is the configuration file for php. So I will open this in a text editor and then I'll go searching for two values. The first one is called post_max_size and not surprisingly it defines the max size of a post. It's down here and you see it's set to 2 MB. So I'll set this one to 20 MB instead. The next value I need to change is called upload_max_filesize.

And I will change that one to 20 MB as well. By making these two changes we are now telling php to allow not only an upload of a file up to 20 MB in size, but also the posting of a complete post that's up to 20 MB in size. I'll now save this file, but if I go directly back to WordPress and just reload this Upload video function, you will see it still says 2MB. That's because we need a configuration change to PHP.

So we need to restart PHP to make that configuration setting kick in. If you're using BitNami, you can do this restart from your task panel here. If you're using WAMP or MAMP, it's the exact same thing. You just find how to stop and start it. So first I'll stop BitNami and then I will go back and start it again. If you're on a WAMP server you'll simply stop and start your server. Now that BitNami has been stopped and started, I can reload this one more time and the Maximum upload size is now 20 MB, which means I can upload my file.

I'll just simply go Select Files and upload the file I want. Of course, this was on my computer, so it took about a second. But if you're doing this on a server, it will take quite a bit more time. But here's a problem, if I simply now go and say Insert into Post, all WordPress does is put in a link to my video. That's not what I want. I want to actually display the video. So I am going to save this as a draft and now I am going to install the plug-in that will help me show the video in my site.

So I'll go to Plugins, Add New plugin, and I'll search for a plugin called video.js. There are lots of plug-ins available that will allow you to embed videos into your site. The reason why I want to use the video.js plug-in is because, like the title says, it's an HTML5 video player for WordPress. What that means is you can upload proper HTML5 videos to your site. That doesn't necessarily make a lot of sense to you unless you really know what HTML5 video is all about, but the core issue here is if you upload a video to your site, you don't know if a browser or mobile phone or tablet will actually accept it.

HTML5 video will help you get to full support for all devices. If you want to know more about HTML5 video, you should go check out the HTML5 Video and Audio In Depth course by Steve Heffernan, who happens to be the person who created this plugin. So I will video.js and activate it in and now I can go back to my videos, go to Edit, and make a change to the embed code.

In your snippets file you'll find the complete embed code for a video of the type mp4. So I will copy that and paste in it and then I'll copy the URL to the video we just uploaded and paste it in here. Take note that here I am actually defining what kind of video this is as well. This as an mp4 video, but if you're using a different type of video file, you need to use a different prefix, and I'll show you how to find out what those prefixes are in a second. But for now, I've defined it's an mp4 video.

Here is the URL to the video. It preloads and this is the width and height. Publish this and view the video, you will see it appears here inside my post and we can play it. (Music playing) Now this video.js plug-in adds a lot of extra features, like for example we can go full-screen and it has audio controls and a scrollbar and all the stuff we need.

So it's very similar to what we got with YouTube, except this is now hosted locally on our computer. I said that the video I uploaded was an mp4 video and that if you're using a different type of video you have to use a different prefix here. If you want to know those prefixes, you can go back to Plugins, go to VideoJS, and find the Visit plugin site. And here you can get all the documentation you need to get started. The easiest way for you is to go to WordPress plugin here and just navigate to it and under Installation you have code examples from everything.

Here you have mp4, Ogg, webM, and so on. If you don't want to host your videos on YouTube, Vimeo or one of the other excellent free video hosting services, you can host them natively within WordPress. However, if you upload video to WordPress you have to remember to add a plug-in to manage your video player and you also have to remember that this puts a huge load on your server, so you have to make sure you have enough capacity to handle it. Otherwise, your site will simply go down and that's not what you want.

Show transcript

This video is part of

Image for Create an Online Portfolio with WordPress
Create an Online Portfolio with WordPress

40 video lessons · 28934 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 6m 28s
    1. Welcome
      58s
    2. Using the exercise files
      3m 54s
    3. Using the code snippets file
      1m 36s
  2. 8m 31s
    1. What is an online portfolio?
      2m 43s
    2. Tour of the finished project
      3m 15s
    3. Setting up a WordPress development environment
      2m 33s
  3. 16m 10s
    1. Creating site architecture
      5m 1s
    2. Creating a child theme
      6m 7s
    3. Creating an external file to manage functions separately from the theme
      5m 2s
  4. 25m 26s
    1. What is a custom post type?
      2m 14s
    2. Setting up a custom post type
      6m 39s
    3. Adding advanced variables to the custom post type
      3m 35s
    4. Advanced custom post type functionalities
      4m 29s
    5. Changing the menu position of the custom post type
      3m 19s
    6. Adding a custom post type icon
      5m 10s
  5. 22m 8s
    1. What are custom taxonomies?
      3m 34s
    2. Setting up a basic custom taxonomy
      2m 52s
    3. Hooking a custom taxonomy to a post type
      3m 13s
    4. Adding advanced variables to a custom taxonomy
      3m 9s
    5. Using hierarchical and nonhierarchical custom taxonomies
      5m 54s
    6. Using custom taxonomies in admin
      3m 26s
  6. 25m 40s
    1. Populating content into the custom post types
      10m 54s
    2. Uploading videos to YouTube
      2m 22s
    3. Embedding YouTube videos in a custom post type
      4m 23s
    4. Uploading videos to WordPress
      8m 1s
  7. 39m 47s
    1. Creating custom post type templates
      6m 50s
    2. Adding taxonomy info to the custom post type template
      9m 13s
    3. Creating conditional custom taxonomy links
      4m 46s
    4. Handling multiple post type templates: Individual templates
      6m 25s
    5. Handling multiple post type templates: Consolidating everything in one file
      6m 21s
    6. Handling multiple post type templates: Making custom post types the default
      6m 12s
  8. 15m 23s
    1. Creating an index page for a custom post type
      8m 10s
    2. Creating a custom taxonomy index page
      7m 13s
  9. 12m 3s
    1. Creating a custom footer sidebar template
      6m 58s
    2. Displaying a list of links to the latest custom post type posts
      5m 5s
  10. 14m 58s
    1. Creating static pages for the front and the blog
      4m 54s
    2. Populating the menu with new index pages
      4m 52s
    3. Creating a contact page with a contact form
      5m 12s
  11. 5m 55s
    1. Including the abstraction layer in other stock themes
      5m 55s
  12. 1m 22s
    1. Next steps
      1m 22s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Create an Online Portfolio with WordPress.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.