Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Learn how to build an advanced portfolio site that showcases various types of content using the free open-source application WordPress. Author Morten Rand-Hendriksen demonstrates creating custom post types, differentiating and classifying content with custom taxonomies, and working with custom post templates. The course also shows how to embed YouTube videos, build index pages, display the latest posts from different custom post types, and hook custom post types into separate themes. Exercise files accompany with the course.
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.
There are currently no FAQs about Create an Online Portfolio with WordPress.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.