BACKGROUND VIDEO

"Now, this one, we're going to have a video in there. What I'll do now is just jump over to Vimeo and grab the code. Here, we are in Vimeo, and as you learned yesterday in the videos episode, you can either embed videos or you can put them as a background and you can do this for both Vimeo and for YouTube. If you need to, go back and look at that video again.

Here, on embed, I could grab the embed code which grabs the iframe, but I'm putting this in the background. Vimeo is just like MOBLE, you can put images in the background or you can put them embed on the top. Well, this is going in the background, so we don't want the embed code. We want to go over to the distribution, and what we want to do is go to file links, and then you can see our 1080 or 1920 pixels. I'm going to copy that.

Just so that you know, I could copy these other video sizes in here, these are the dimensions, like 720 might be a better one in here, but I'm thinking about future content users. People might copy this particular column and move it to a different location, which is then full width. What we don't want is a pixelated video. So again, thinking about those future content users, this is why this is a masterclass. I'm going to be giving you these tips as we go, but it's always around thinking about future content users. That's the narrative here, so those people will never mess it up. This is what we're trying to achieve.

Okay, so copy this link, and we'll jump back into our editor, and we'll click the pencil icon, we'll go to background, and we'll paste in our link. And now, the system already knows it's in the background, so it's going to loop it. We don't want it to stop playing and maybe have a black screen, but we want it to be muted. We don't want it to play sound. The browser typically will turn that off anyway. But if it's in the background, there's no on-and-off tools for the user so you can get in all kinds of trouble. So, we always want it to be muted, and we want it to auto play.

As soon as people scroll to that, we want it to be playing. So, it does that for you as you can see, sets that up automatically. Now, notice that you can't see the video in here. That's because the mobile editor we're making some core decisions. When we built the mobile platform, we decided not to play videos in the editor because that uses a lot of memory. MOBLE runs and works in the browser in Chrome or Safari. There's nothing that you need to download, you just log in and it works, but the browser can only have so much memory. So, we've made a decision not to play videos in the editor. We're not going to auto play them, not going to play them.

In this case, what I want to do, and it's a good idea anyway, is to give this a thumbnail so that we know what that thumbnail is. Normally, that would be the first screen of the video. Now, I'm just going to go in here. And I'd like this particular image, this square image that was an image from the video anyway, so I can actually go and put this in here as the background. Okay. And this has still got that background image fixed on, so we don't want that. We're going to turn that off. Now, we've got a background video in there and a thumbnail."