6: Adding Different Video Types
Running Time: 8:37
In My Garden features two very different video types. In the plant page I insert a video which is an .mp4 file that is uploaded and stored in the Media Library. (Poor Arlene. She’s doing all the backbreaking work).
The second method is demoed on the harvest page. I take some special code from YouTube and just paste it into the WP Editor.
Which method you use will depend on your needs and what your web host (server) will allow. I prefer using an outside service (like YouTube or Vimeo – which I use for this course) to serve up my videos.
Transcript Of This Video
I’m on my prototype site, and in this video, I’m going to show you the two ways that you can add videos to your site. This page here, the “Plant” page, we’re not going to do the whole thing. We’re just going to scroll down to here, and we’re going to see we have a 2-column layout right here that is text on one side and a video on the left side. I’m just going to grab this text right over here and copy this. OK, now let’s go to the site that I’m building.
Here’s the site that I’m building. Here’s a list of the pages that I have so far, and I noticed two of them I don’t want. I want to delete them. One is just this blank that’s just nothing, and the other is the sample page that comes with every WordPress installation by default. I’m going to get rid of those too just by clicking the checkboxes, and right over here it says “Bulk actions.” I’m going to click “Move to trash,” and then I’m going to click “Apply.” What’s going to happen is that both of these are now going to be in the trash bin.
How do I know? If I click “Trash” over here, you can see that they are. The way WordPress works is when you delete something, it goes into a trashcan, just like your computer works, and then you can go into the trash can and either restore them or delete them permanently. I’m going to delete them permanently, so I’m a select both and then bulk actions again, and I’m going to remove them.
I tend to do this kind of thing especially if I know I’m not going to need something again, because if you just accumulate a lot of empty pages or pages that you don’t need, you want to trash those because you’re just bloating your database up with a whole bunch of stuff that you don’t need. The database is where everything that you create for your site, that is all the text content and links, all the instructions and the settings, it all gets stored somewhere, and it gets stored in a database. There’s no need to make that larger than it needs to be.
OK, so let’s get to adding a page. The page I want to add is going to be the “Plant” page. For this, I’m going to use a different kind of block. I’m going to click on the inserter, and this block is something called– In the layouts, there’s a block called “Columns.” If I happen to know columns, I would have just typed in “Columns” over here, and that would have been fine. What it does is, this block contains two blocks. This first block to the left, I’m just going to Command-V, and I’m going to paste in my text. That’s fine.
This block over here is where I’m going to insert my video. Now, as I said, there’s two different ways of doing this. One is you can upload your video, so let’s do the first way first. I have a very short clip of my wife bending over and sowing seeds in the garden. I say “Short” and “Small” because it’s less than one megabyte.
Let’s go find that file. It happens to be over here, and I’m just going to– I could do this. Look at that. I could drag it right in, and that is so nice. I just did it like that, and I was a little bit surprised because I didn’t know that had just changed to make it so much easier to do it now. So, it’s in there. I even have, as I did with images, the ability to put in a little caption. I’m not going to do that, but notice over here on the right-hand side since I am working with a video block, I have some controls that I might or might not want to use.
But pay attention to whatever block you’re working in, “What are the options I have?” Right over here if I went to my paragraph block, you can see I’ve got the typical paragraph options, and then if I click outside of both of these– Just right over here to the left, you’ll see that I have– Let’s go over here. It says I don’t have anything, that’s interesting. But I clicked just in the right spot to the left, and I have the column block. By the way, with the column block, you can insert up to six different columns, if you want, into your row. I think that’s too many, and two is just fine for me.
I’m going to go straight to publish this. Let’s have a look. That’s fine. It looks like this is small. There we go. Poor Arlene. Anyway, it’s small because it’s sized for the fact that you have three columns. You’ve got a column over here, a column here, and a column here. Whereas in my prototype site I really have these two, so that’s why it’s so much bigger. I will get to that issue, more about design and changing this when I get into themes. But right now we’ll leave it the way it is.
Now in this method, I uploaded my file to my media library, and to make sure I did, because you saw me drag and drop– I want to go right over to here, and I will show you in my media library. Let’s go over here. We now have three assets. We’ve got the media that I just uploaded, “Arlene working hard in the garden,” that’s what this is over here. That’s the movie, and then I have the two images that I uploaded earlier. So, that’s it. That’s how that works.
The second way, you don’t up upload anything. You’re going to embed an image using a video service like YouTube. I’m gonna go over here to “Pages,” and I’m going to add a page. In this case, this page is going to be “Harvest.” Now before I do this, let’s have a look at the prototype site. Let’s go over here to the “Harvest” page. I’m going to scroll down over here and here is my embedded video from YouTube, and you can tell it’s YouTube. It’s got some YouTube markings in here. Anyway, “How do you do this?”
Back to the site, I’m working on. Here is that video on YouTube, and there’s two ways you could do this. One I don’t recommend, it will make your life a little more complicated. The natural inclination might be to go over here to click on “Share” and to click on “Embed” and you get the code, and you paste it into the editor. I don’t recommend it. It’s just– You can, and it will work, trust me it does.
But a much simpler way is to highlight the URL, which I’m doing, and I’m copying the URL of the YouTube video, and I’m now going to paste it right over here. Now I’m going to paste it right into the block, and the block will transform itself into a YouTube video block. You can see right over here it’s YouTube, and it gives you a little option about resizing. I’m just going to leave it just the way it is. That’s the only options I get, and that’s fine. I’m going to now publish this.
By the way, you can do this not just with YouTube. You could do it with Vimeo or any video distribution service which allows for the embedding or the sharing of the video content from those platforms so that you can bring it into your site. Any of those are going to work in just the same way I did. Just copy and paste the URL of the video into your page. Now it can’t be too much simpler, and I don’t think.
I’m going to click on this over here, and you can see, perfect. It’s over here, and away we go. You can tell it’s a YouTube video, and there I am slaving away, working. Two different ways to get video into your site. One is by uploading an actual file that you created, or you can take a video from a video distribution service. To drive home that point, if I go back to my media library, you’ll see of course there’s no YouTube video in here. That YouTube video is on YouTube.