This lesson is exclusive to members

Premiere Pro & Dreamweaver - Fullscreen background video for a website

How to make a WebM video file in Adobe Media Encoder & Premiere Pro & After Effects

Daniel Walter Scott || VIDEO: 8 of 15

Download Exercise Files


I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link:

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hey guys, in this video what we're going to do is we're going to look to show you how to install this WebM format. You'll probably notice that it's not actually installed by default. So we're going to install the plug-in, we're going to make it go through the settings to make it really small, and export it, and we'll end up with this lovely guy, '.webm'. Look how small he is. All right, let's go ahead and do that.

Cool. So why do we need a WebM format? mp4s cover pretty much all the browsers, except a couple of used cases, and those used cases can be filled by the WebM format. Now if you would ask me a couple of years ago what video format we should be using, it would have been 'ogg'. The ogg format-- now that has changed, now the WebM is the kind of format to use, so if you're watching this video, it's 2017 now, if it's 2024, obviously there's going to be a different video format, so just go and check what's common, but right now the WebM format is the good fall-back one. Google makes it, really sponsors the development of it, it's kind of an open source format, so we need to go and make it, but Adobe have made it a little hard to do. I've made it a little easier, hopefully for you, so let's go and do that.

So, why is it hard? It's because the actual format is not built into Adobe Media Encoder, or Dreamweaver, or After Effects, we need to install it. Cool thing about it is that there's a free plug-in. There'll be a link up on the screen here, here it is going to the link is even easier, so it's this place here 'fnord', and then get a 'WebM'. And I download the Mac or Windows version. Now when encoded in the plug-in, you can see it here, it's in your exercise files, it's the WebM plug-in. It might be getting a bit old, you might want to go to the website and download in case there's a newer version, but I've included it there just to make it helpful for you.

What you need to do is, you download it, or click in here, and you just run it. So you can see here's my 'dmg' version, and you run that, that's my MAC, this 'msi' version is for you PC. Double click them, and they will install. And what will magically happen is, you'll have to restart Premiere, or After Effects, or Media Encoder, whatever you're using, restart it, and what will happen is, now if I go to 'File', 'Export', and I go to 'Media', under 'Format' there's now one called WebM, that wasn't there before. Click on 'WebM', and the cool thing about it is that it's just a different file format; it uses a lot of the same things. It has height, and width, and it has slightly different variable bitrate down the bottom here, but essentially the same sorts of things.

Now if you want to cheat, I've got a preset, you can install, remember from here, you go to this one, say 'Import Preset', and there's this one called 'Dans Web Video WebM Preset', so bring that one in. So instead of going through everything and explaining it all again, it's exactly the same in the previous video. If you haven't done the previous video, it's the mp4 version of this, it's exactly the same, so we're not going to go through it all again because that was epic-ly longer video, so what we’re going to do is, yours will probably start to default, it will have audio on, so turn that off, change the height and width, change the frame rate to 15, and stick the encoding-- this is the one thing that is a bit different, that's the codec; this is the new one, that is the old one. I think the new one is pretty good on most browsers. I'm going to use the older one because it works on more browsers, and the file size looks pretty similar, and the quality looks just as good.

Now in terms of the bitrate, put this at 1000, that's what I found to be good, you can go lower, you can go higher, but it increases or decreases the file sizes accordingly. Down here, '2-Pass Encoding', very similar to the mp4. And that's it; we're going to add to queuing it. Need to change the file name here-- where am I going to put this one in? It's going to go into my 'Videos'. It's got the exact same thing, except it's got the WebM extension. Click 'Save', hit 'Play'. You can see these ones are finished, they're not going to run again. This one here now plays. Goes through and encodes it. Now, WebM takes forever to encode, so it took the same time to encode like five versions of the mp4 as one WEbM. So we're going to speed this up again, ready, steady, go. 

All right. It's done. So let's go and check the file. You can see it here, it's even smaller than our mp4 version. Often you can play around with the settings in mp4, and WebM. It's not like it's a smaller file format, it's just the settings that I picked, ended up becoming a smaller video, what I found is that I can mess around with the mp4 and get it just as small as a WebM. It's just good in quality. These people there would argue that point though, but know that it's not half the size using WebM. It's because my settings work different, they work kind of paralleled.

Now, installing the plug-in is a pain in the bum, because it feels like Div Media Encoder, or Premiere, or After Effects, they all should have that feature, right? So what you can do is you can jump out to this one here, and help me out. Go to this one called ''. Go to here, and what you can do is, pick your product, pick Premiere, and say-- and you'll write a little list, and say, 'Please put in WebM,' so what happens is, the developers gets these lists, and whoever yells the most, the top of the list, gets these features, and that’s a feature I want, so-- Let's go do as a team.

The last thing we're going to do is I'm going to give you-- because this is a slightly shorter video than the other ones in this series, I'm going to fill it up with some awesomeness. So in Adobe Media Encoder, just a little thing that I find quite useful, is, say I want this WebM, and I’m going to upload  it to my website, what happens is, I'm going to duplicate it, when I go into 'Custom', we did this before, right? We played around here, but see this option over here, which says 'Publish', this can be really handy, you can publish it to your Creative Cloud, in an account if you're using that, and you can just dump it on to your shared drive with people, and it's instantly up there as soon as it outputs, and that's really handy when, say you're going to bed, and you render all of these, and then they chug through, and they spend hours rendering, but when they're finished, they're going to start uploading to the Creative Cloud. You can see, it can upload to your Behance account, it can go to Facebook, there's so many-- this is the one I use, 'FTP', goes to my web server where I host my website, and I just dump them into some video folder there. You put them in the remote path, the video; Happy days! Vimeo, YouTube, that one I use quite a bit as well. If I'm uploading straight to YouTube, render straight to YouTube; Happy Days!

All right. That's it. Now we're going to go and start building an actual website, and actually add this video stuff to it. So let's go and do that.