A Smarter Way To Learn HTML & CSS(2015)

81
Embedding Vimeo videos

If YouTube is the network TV of online video, Vimeo is cable. It’s a little classier, looks a little better, and is preferred by many creative people. It’s free for the basic service. You can remove all Vimeo branding if you’re willing to pay $199 a year.

The process of embedding a Vimeo video is similar to YouTube’s.

I’m assuming you’ve produced your video and posted it to Vimeo. Here’s how to put it on your webpage.

1. On your Videos page at Vimeo locate the video you want to embed. Click the paper-airplane icon at the upper right.

2. A new window opens. If you don’t choose to customize, copy the iframe code and paste it into your HTML document, and you’re done.

3. To customize, click + Show Options.

4. Select the options to change from the dropdown.

5. In the options panel you can specify the dimensions of the video player. Change the width or the height. Vimeo will automatically change the other dimension to preserve the ratio of 16 to

6. By clicking on a color block or specifying a color by hex code you can change the color the video title. The color of the progress bar will change to match.

7. For a clean look, you’ll probably want to uncheck Portrait, Title, Byline, and Show text link underneath this video.

8. To make the video play automatically, check Autoplay this video. To make it loop check Loop this video. Chances are, you don’t want a video description. If you don’t, leave the last item unchecked.

9. Copy the embed code and paste it into your HTML document.

For $59.95 a year Vimeo gives you additional customization options and other privileges including faster conversion. For $199 a year, the Vimeo logo goes away; you can, if you wish, insert your own logo.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-81-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/81.html