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

This lesson is exclusive to members

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

15 lessons / 2 hours

Overview

Hi there, I’m Dan. In this course we’ll learn how to create and edit a video for our website. Then we’ll go and build the site from scratch. It looks fancy, but it’s not particularly hard. 

I built this course for beginners. You do not need to know how to code or how to edit video to take this class. We’ll start with the super basics. This could totally be your very first website, wouldn’t starting with a video background be a super cool first project?

We’ll go through the full process. I’ll show you where to find some video, I’ll show you how to edit it in Premiere Pro. We’ll do cool video effects like blurs, tints and transitions. I’ll show you how to export the video so we can get the file size super small. Once we’ve created our video we’ll build a basic website together and make our video all cool and full screen. 

We’ll also create a second option where the video peeks in through a specific box.

In this course I’ve got exercise files so you can play along. I’ll also save my files as I go through each video so you can compare yours to mine - handy if something goes wrong. We’ll be using Dreamweaver & Premiere Pro but 95% of this can be done in generic web & video tools. 

Remember: I’m happy to help & I’m pretty handy with replying. Also - there is a handy cheat sheet you can print out, plus there are teacher resources if you need them. 

The best thing - is that it’s not that hard. But super awesome video background will impress the heck out of your clients. 

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe .

  • It will be handy if you know some basic HTML before this course. It’s focused more on video backgrounds and not the entire web design process. 

What am I going to get from this course?

  • 15 lectures 2 Hours 18 minutes of content!

  • You'll learn to build a website with a video background.

  • Pros, cons & cool examples of video backgrounds. 

  • How to edit your video in Premiere Pro. 

  • Where to get video. 

  • Basic editing, adding texture, fading, texturing, blurring, coloring. 

  • Premiere or After Effects? Both?

  • What size should it be. HD? 4K? 

  • Minimising file size

  • Exporting in the right video format

  • Media Encoder. Webm, mp4, ogg, ogv. 

  • How to create a basic website. 

  • Add fullscreen background video

  • Add a background video to a hero box. 

  • Integrating with an existing Bootstrap website. 

  • Make the site responsive. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. Aimed at people new to the world of web design. While no previous Dreamweaver experience is necessary, it would be good to do one of my other intro courses before attempting this course.

  • NO: This course is NOT suited to people experienced in using HTML & CSS.

Course duration 2 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

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 'adobe.com/products/wishform'. 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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024