Full Video Transcript
Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton here in San Antonio [Texas, USA].
Today I am going to add a new video to our series on the Rev Slider. I want to walk you through how to add video into your Rev Slider. A lot of you have asked me to do that. So today’s the day. I’m going to show you how to add in a YouTube video just embedded into your slide show so that it will auto play or so that they can click on it and play it right there without leaving your page, without having to do any other step but click Play. Then, I’ll also show you how to get the really cool, kind of wide screen, really nice video in there that’s looping with a little bit of text laid over it. All that’s going to happen right now. Here we go.
Let me shrink down and move out of the way. All right. I’ve already created a Rev Slider slide here. I’ve already put in a little bit of text. Basically, what I want to do is just embed in YouTube video right here in this one area. I’m going to jump over to YouTube. I’m just going to go to the very top. Let’s see if I can show you this portion here. Let me go and grab the URL. Now you can see that better.
Let’s see. I’m just going to grab the end ID right here and copy it to my clipboard. I’m going to jump back over to our slideshow. There’s a button right here that says Add Layer Video. Right here, the very first option is already default YouTube and you’re just going to paste in that YouTube ID that is unique to the one video you want to use. Then I’m going to Search. If you’ve done this correctly, YouTube is going to quickly search and give you a preview of the custom thumbnail or the thumbnail that was chosen for the video.
Now, you’ve got a few options that you can work through here. What I want to show you though is obviously we don’t want this to take up the full width, we want this to just kind of sit in there nicely. If you don’t know a size that you would like to use or what could be appropriate, you can jump back over to your video, scroll down just a little bit, and click Share. Go to the Embed area and click Show More and it will show you suggested sizes of what the ratio aspect could be. I’m going to do the 640×360. I think that will be small enough for the area that I need it in. 640×360. Let’s jump back over here and do 640×360.
Then, here are a couple more settings that you can do. Do you want it to auto play? I would highly suggest never letting it autoplay especially on something like this where it is not going to loop and there is audio. We don’t want it to autoplay. It is poor user experience. If you wanted it to be muted. You can play through all these. Then you can read through all this is wanted to set a preview image. I do not. I just want the video visible there. I’m going to click Add Video. It’s just going to throw it in there. I’m going to have to kind of drag it over and then realign where it should sit.
Now, I know you’re aware of these little crop margins here that kind of keep us in our boundaries for the Rev Slider. However, I’ve done my settings a little bit wider on the screen. I’m going to click Save over here on the right side of the screen and click Preview. I see a little bit of what it looks like. It’s just a little bit cut off but not too bad. I wants go see what it would actually look like on my page. I’m going to come here and click refresh and see if it does extend past. It does extend just a little bit past. Maybe we want to play around with that size. In order to go back in and edit that I would just click Layer.
Actually, I don’t think they have a real way of going back in there and editing that, which is kind of frustrating. I know that the guys are working on their next beta mode of the Rev Slider. Maybe that will be addressed, or maybe there’s a trick that y’all can tell me about that you know of — a way to get back in there and make a quick edit to an existing video. You’ve seen me do that. I’m going to click Save and run back over here to the embedded one really quickly and click refresh and see if my video kind of sits a little better.
Note we also have this space here so we can kind of scoot everything to the left. You’ll just want to play around with it and see if you can get that in there. But you can get an idea of how simple it is to embed a YouTube video.
One of the reasons why you want to embed a YouTube video is because all that server space that the video takes sits on YouTube’s server space and we don’t have to have it sitting on our space. It loads a lot more quickly and we don’t necessarily have to worry about buffering issues or anything else like that. That’s kind of the idea for a YouTube video. That’s kind of sitting in there good. I’m going to click Play.
So you can see the slide doesn’t change. And if I wanted to have more slides, as soon as this video is done playing, we can set it to where it automatically goes to the next slide. Ah! Isn’t that awesome? I love it.
Then how do we go from this to having a video actually be the full width of the screen and then have maybe a little bit of cool text kind of fly in and be a part of our wonderful, uber-cool looping video that sits there? The first step to that is having the right size video or having a loop video. We get a lot of ours — and we’re going to have a shout out to — the VideoHive which is a sister site of the ThemeForest and envato market. They’re really good loops over here that you can get. They range anywhere from … most of these here are $6 and $7 [US] You can just come in, grab a loop, you know what you want, something smaller, maybe 4 to maybe 8 seconds max. And then have that video. Purchase that.
You’ve got a license now, once you’ve purchased it, to embed it on your website. But you do need an MP4 file. Be aware of that. You’ll need an MP4 file. Most of these videos here on envato come in a .MOV so you might need to do some converting. Not a bit deal. It’s simply done. And once you have that file you can upload it to your media library. Let me shrink down here. This is a video that I grabbed over off of VideoHive. You can see it play here.
What I’ve done is I’ve taken it. It has no audio to it. I’ve taken it and I’ve uploaded it to my server. This particular file size — if you keep them small like that — really small loops, you can actually upload them through your media folder. If, by some random chance, you try to upload them through your media dashboard and it says, no, sorry, the file’s too large, you might have to go through your FTP and upload it there. If that sounds confusing, no worries, I will give you a link to some documentation that ThemePunch, which are the authors or Rev Slider, have created so you can kind of walk through that step-by-step. Here we go.
I’ve already got that video uploaded to my server. I’m going to go over here back to Rev Slider and go into another slideshow that I created just kind of prepping for this video. I do want to show you though this area here. I want you to pay attention to this because this is… Full screen is what we need to set our width to because we want this to go full width.
You also want to be sure that your theme that you’re using will allow something to stretch the full width of the screen. Then we also want to force full width here. And then you can set a certain height. If you don’t want it to be the absolute full screen you can adjust it to a certain height. If you want it to be smaller because you’ve got a thinner video, you can set that as well and kind of adjust that. I’ve already done my other settings over here on the right side of the screen that mess with the appearance and navigation. It gets off that progress bar across the top up there. I’ve done all those settings and created this page. Let’s see if I can click refresh.
Now it’s going to stretch all the way across the screen. You see how full that is. So now we need to go embed our video so that it actually plays. Let’s go into Edit slides. I’m just going to click Add New Transparent Slide and then we’re going to edit the slide. You can go through all these but it’s really not relevant to what we’re about to do right here. I’m just going to scroll down. We’re going to click Add video again.
This time what we’re going to do is we’re going to grab the path for the video. We’re going to come back over here and we’re going to use this HTML5 and we’re going to embed it right there. We’re just going to drop that code in there which is the path of where that video sits on your server space. Then we want to check these settings. And we want it to say Auto play because we want this looping. We’re going to check loop so that it doesn’t stop playing. This is if it did stop playing, you can tell it to immediately go onto the next slide. You can hide controls if you wanted to.
We can mute it but my clip does not have any audio so it doesn’t matter. And we can click Add this video. It’s going to put it over there and it’s not going to look the part just yet. Let’s save what we’re doing and go do a refresh on our screen and see what we find. There she is. How cool is that? She’s playing and she’s checking it out. She’s turning around and seeing the house and giving us a thumbs up. That looks really great.
You can also do this where you’ve got the slide and you throw a little bit of text on top of it. This is the same one (I’ve duplicated it) and I’ve decided I want to go in throw in some text next to the video and basically have a button there, as well, that kind of allows people to View our Homes. I did some add layers for text and just kind of wrote over what exactly I wanted it to say. Then ultimately it comes out looking like this.
I’m going to refresh this so you can see this. And now we’ve got her sitting there and then it fades in, “We make Dream Homes Come True.” Then there’s a button for people to click View Homes. How cool is that?
It’s totally simple to do. There’s a little bit of extra work whenever you have to go in and make the MP4. Other than that, this works brilliantly. I hope you enjoyed this. If you did, be sure to click the button down below so that you can subscribe to every single WordPress Wednesday and get some really cool How To videos for WordPress.
Have a great one, y’all. Bye bye.
CC & Transcript provided Mally LaPete
