DAY 02 | EPISODE 03 | QUICK CLIP 04

BACKGROUND VIDEO

Paul Davenport

  Paul Davenport  |    03:21

Add YouTube and Vimeo to File Link to any Frame and your your video will appear in the background allowing you to places other objects (like Text) on top of it.

   AI Website Transcript 

"Same with the background here. We'd simply go to the background, and you can see here in Vimeo... Okay, Vimeo. What I will do is jump over to Vimeo. Now, I'm not going to use the embed this time, because it's going in the background, isn't it? So what I will do is, rather than go to embed, I go to distribution. And you can see the video file link. I want to grab a link, not an embed, so in this case I'm going to grab this 1080p, this 1920px by 1080px. Well, why am I grabbing the big version even though this is only a small square? It's probably about 600 pixels. Well, because if a user changes this into a column, one of our content teams could change the column to a full width rather than a three column, then we don't want the video to be pixelated. Since this is coming from Vimeo, we may as well grab the large one. I'll copy that link back into our files area and then I would paste this in. That's how you put a background video in.

Now in YouTube, if you want to put a YouTube video in the background, we go back to share again. This time we can copy our link. Okay. In this case I will put my YouTube link here. So pretty simple stuff. If it's an embed, we put in the embed code, and if it's a background, we put in the link. Let's just confirm what we mean by that. Over here in share we've got the embed code and we've got the link, haven't we? Link here, embed code here. If it's an embed code, we grab this code, and if it's a link, we grab the link. Okay? Great.

What we'll do now is go and have a look at our widget. Let's just close this down. And you can see here we've got our widget. Well, what's a widget? Widget's pulling in that dynamic content, isn't it? In this case it's pulling a video file from our files area with a tag called Video Demo. If we just jump over here and remind ourselves, here's our video. We've only got one video at the moment that's tagged with Video Demo. But if we were to have more, this would be a really cool slider.

What we'll do now is have a look at this. We'll go over to the files area and we'll have a look at how this is tagged. And then what we'll go and do is upload our four new files and put them into this particular slider here. What we need to do now is over into the files area, and straight away at the top here you can see our video with the tag Video Demo. Any video that we upload with the tag Video Demo will go straight into that slider, will go straight into that slider over here.

What I'm going to do now is upload four files and then you'll be able to feel confident that you can upload a YouTube, a Vimeo, a Spotify, and an Excel document. Let's start off with this YouTube video. What I'm going to do is go over here and add a new file. It's going to be a video and this time I'm just going to call it YouTube. Oh, we could call it YouTube Video. Why not? And I'll give this the alt text as well. What we need to do now, if it's a widget, you want to grab the link, not the embed for YouTube. What I want to do now is go over here, copy that link, I'm going to come back to our file. I'm just going to see, it says File URL. I'm just going to paste in the file URL.

That's the file there. But if we go down here, look at this other info here. I've got a destination URL. That means, when someone clicks on it, it's going to go to that video. In this case we're going to put it in a popup and it's going to start to play. So just make sure that you've got your link in here and your link in here. Now, we can also give it a thumbnail. This is the file icon. This will be the icon that they see in the widget. Well, I'll just select image one now for our file icon for our thumbnail. And then all I need to do now is tag it. We want to give it a tag in the widget. I'll call this one something like Media Demo and then we'll have it to play in sort order one.

So there's our YouTube. We've got our link, we've got our destination URL, we've got our title, we've got our alt text, which gives us that value for our SEO, we've got a tag, and we've got a sort order. At which point now I'm going to press save, and here you can see our YouTube video with a tag called Media Demo in sort order one. Pretty good.

Now we'll add our Vimeo video. I'll just go straight over to add a file, and for the title we'll call it Vimeo Video, and we'll also do that for the alt text for now. But we could be more descriptive in here, as you know. Now what we need to do is say that it's a video and we need to make that choice between is it a URL or is it an embed code. Well, as we know for YouTube, we just copied the URL, didn't we? We copied the link. Well, let me tell you, with Vimeo it's a bit special. For your widgets you can do either. You can grab either the destination URL, which I would grab the 1080, or you can grab the embed code.

Just to mix it up a little bit, I'm going to grab the embed code now for our video. So you can see here, this is an iframe. Now I'll go back to our file in this case and I'll just drop in the embed code. But look at the destination URL down here. Watch this when we do the embed code. It strips it out and just drops it in there already. The mogul widgets like Vimeo, because they're nice and clean. So if you've got a choice between... Vimeo's great, obviously, for your advertising, but Vimeo's great for quality.

At that point everything's done. We just need to give it our media tag again now, don't we? So it's Media Demo and we'll call this sort order two in this case. What do we need? File icon, don't we? So let's go and choose the file icon for this Alio video, and we'll just choose this one that we've been using in here. We've got our thumbnail in there now and everything's set up. We can press save. Cool. So you can see our Vimeo video, same tag, it's a video, and we're rolling here.

Let's keep going. Now let's do our Spotify song. What I'll do in here is we'll call it Spotify Song and we'll do the same for our alt text. Now what's this? It's not a video, is it? It's audio. So we'll call it audio. We'll go over to our track and we can see here we've got a Coltrane track ready to go here for those jazz lovers. We'll just copy the embed track in here. Now, I'll grab the embed for Spotify, because most likely you probably want to curate your playlist. This will actually, if it's the whole playlist here, it will embed the entire playlist, which will be pretty cool. So I'm going to copy that. I'm going to go back to our file. In this case I'm going to use the embed code again. We've got YouTube, which is a link, and we've had Vimeo and Spotify, which was both our iframe.

What do we do here? We've got this link in here. It's actually got the UTM tracking in there. That's just obviously placed it in here for now. You can leave that in. If you've got any complications, always just take that out. But let's just see what happens here. We'll have that. What we'll do is do our thumbnail icon here, file icon browse, and let's just take this one here. It's not very Coltrane, but still we're set up. What do we need to do now? Media tag. And then we'll call it sort order three. So you're just working in the same way again. Press save. Cool.

Now we've got our Spotify song, so only thing left to do now is upload a document. This is the first document that we've uploaded. We'll go and grab an Excel document. This is a document this time, file from my local computer, called Alio.xlsx. Fantastic. Well, this one we can call it... We can just call this one Excel Doc I suppose, and we'll do the same for our alt text. This one, same. We'll call the media tag Media Demo tag, and we'll call this sort order four.

Now, this is just uploaded as straight document, so in this case I'm still going to give it a file icon. What I'll do here is just browse and this time we'll just take this one. Okay, so now we've got a file icon. We don't need a destination URL here. It understands that this is an Excel. Here I'm just going to press save and you can see our Excel doc in here.

We've got a couple of things going on here. We've got our YouTube, Vimeo, and Spotify. Which we've got two videos, an audio, and we've got a document. But with your documents, just know when someone clicks that document, it will download."

More Quick Clips