Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Anyone looking for a fast and easy way to build a great web site can use iWeb to bring together and post photos and videos that were created using other iLife '09 applications. Instructor Garrick Chow demonstrates the basic functions and the new features of this application in iWeb '09 Essential Training. Garrick shows how to create and publish everything from basic web pages containing text and images to more involved pages with video. He also demonstrates how to create blogs and podcast pages. Exercise file accompany the course.
In this day and age of inexpensive video cameras, webcams and videophones, there is bound to be sometimes when you are going to publish a movie on your website to share with other people. And it turns out to adding a movie to a page on iWeb is no tougher than adding a photo. Now the actual task of getting the movie on your Mac in a first place is up to you. I can't really go into all the ways here, because you could be using a video camera or capturing the video through an iSight webcam, or downloading the video from the Internet or even importing a movie you edited in iMovie. I'll talk about importing photos from iMovie in the next video, but for now let's pick up the things from a point where you already have a movie on your computer. I've copied the folder iWeb movies to my desktop and it contains a couple of short movie clips. Now being an Apple product, iWeb is happy as to have QuickTime compatible movies. But QuickTime can work with just about any video format these days, so most movies you import should work. You can also check out apple.com/ quicktime for supported file types.
Now also worth noting, since you're going to be adding your movie to a webpage, you don't want the file size to be too large or else your visitors are going to spend a lot of time just downloading your movie. Apple recommends that your movies not be much larger than 10 megabytes, but you'll be a better judge of what your visitors will be able to tolerate. Technically, you can drag a movie file into any page, but your best bet is to create a movie page which gives you a nice page layout to display your movie and also write a little bit of text describing the clip. So in iWeb, let's click the Add Page button and I'm going to choose the Movie template and click Choose. And just like with the other templates I have some text placeholders and I also have this Movie placeholder here. Now this Movie has also been added to my navigation bar. I'm going to change its title to Southern Utah and I'm not going to bother replacing any of the Southern text right now.
So to add my video clip, I just need to replace this movie placeholder with the Movie in the folder on my desktop. So I'm going to grab Southern Utah.m4v, drag right over the placeholder, and there it is. That's really all there is to it. And now I can play the movie right here on iWeb. And you get the idea.
Now the movie I've just added is in wide screen format, while the placeholder was in standard 4:3 format. So I might want to raise this movie up a bit to line it up with the top of this headline here. Now once way I can do it is to click the Movie, hold down Shift and click the Headline and go to the Arrange menu and choose Align Objects > Top. But in this case, if I deselect, you can see that the top of the text box is not only the top of the letter, so the movie to me kind of looks like it's a little too high right now. So I can select that movie and just tap it down with the Arrow key on my keyboard until it looks good to me. And right about there should be fine.
So it's pretty darn easy to add a movie to an iWeb page. And you do have a few customization options you can apply once you've embedded your movie onto your page. You can resize the movie by selecting it and dragging its corner handles. But try not to make the movie bigger than its actual size, because it will probably look pixelated and its quality won't be that great. Let me just undo that. If you want your movie to be in a different dimension, you really should create and save it that way before bringing it in to the iWeb. You can also open up the Inspector and go to the Metrics Inspector to see the current size of the video and you can click Original Size to see the movie in its native dimensions, but that's probably just too large for this particular example, so I'm just going to choose Undo Original Size, set it back to the size that looks better on this page.
And also with your movie selected, you can go to the QuickTime Inspector and here you'll find controls for adjusting where the movie starts and stops. So if you wanted to just start, say, 10 seconds into the video, you can drag the Start slider over and you wanted to end, 27 seconds in the video, you can drag the End slider in. But I think it'll be better to just edit out the parts you don't want before you bring a movie into iWeb. But if that's not an option, you can use the Start and Stop sliders. And you can also set a Poster Frame, which is a still frame that represents the movie on your page before your visitors click the Play button. So as you can see the first frame of this movie is just a black screen, which isn't very interesting.
So you can use the Poster Frame slider to scrub through your movie to find the shot that better represents what the movie is about. Kind of like that shot there. And you also have options like Autoplay, which means the video will start playing as soon as the page loads. Loop, which means it will play in a continue loop, meaning once it gets to the end of the video, it'll go to the beginning and play it all the way through again, and on and on and on. And the one that's checked by default is Show movie controller. If you want to give your visitors ability to pause the movie or fast forward or jump to other sections, you can leave that checked. If you want to force them to watch the movie start to finish, uncheck your movie controller. But I'm going to leave that on.
Now one last thing to mention about adding movies in this way is that you should try to avoid placing objects on top of the movie. So for example, I could just grab shape here and add something like that. Now that's okay here in iWeb, well, I'm not actually obscuring my movie, but this is just to illustrate that you should not put objects on top of your movies, even though you can, because most web browsers consider movies to be the top layer object on the page. So even if you place a shape or photo over the movie it might not show up like that in the visitors web browser. Now you might want to get fancy and maybe add a frame around this by maybe drawing a rectangle, around or like so, going to your Graphics Inspector, turning off Fill, then turning on Picture Frame, something like that. Now this is okay, because the object is not actually overlapping the movie, or you just have to make sure it doesn't overlap the movie.
So you can do certainly do something like that if you wanted to do, but just make sure you don't try to design your page in such a way that objects are overlapping the movie, because chances are the movie will still pop to the top. I'm just going to select the frame and delete it. So that's how easy it is to add a movie to iWeb page.
There are currently no FAQs about iWeb '09 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.