How to Embed Videos with Vimeo - dummies

How to Embed Videos with Vimeo

After you upload your video to Vimeo, follow these steps to embed a Vimeo video in your web page.

1Launch a web browser, log in to your Vimeo account, and choose My Videos from the Video menu.

The Your Videos page opens.

2Select from the Your Videos page the video you want to add to your Web page.

The video opens in its own page on Vimeo.

3Click the Embed button in the upper right corner of the video window.

A window opens, containing the code for embedding the video on your web page.

4Click the Customize Embed Options link at the bottom of the window.

The Embed This Video window expands to display several options.

5Choose the pixel size for displaying the video, and type the numbers in the Size boxes in the Embed This Video window.

Choosing a size is one of the most difficult decisions that video designers wrestle with. Of course, the higher the resolution of the video, the crisper the picture and the better it looks — but the file being sent to the iPhone/iPad is, of course, larger and occupies more bandwidth.

The size you choose should depend on whether you want the video to be viewable on all the various Apple devices or have separate versions — a lower-resolution version for the iPhone and a higher-resolution version for the iPad.

One piece of good news: Vimeo automatically handles the math behind the screen resolution, so you shouldn’t need a calculator for this one. If you enter 640 as the horizontal size of the video, Vimeo fills in the appropriate size in the corresponding vertical box. In the case of 1280 x 720 high-definition video, the video is resized to 640 x 360 to preserve the widescreen format.

6Choose the color of the title of the video from the Color drop-down menu.

You can also type a hexadecimal color code in the box next to the drop-down menu if you want to add a custom color for the title of the video.

7Select the check boxes to choose which information appears on the screen before the video starts playing:

Portrait: Use a thumbnail from the video. Title: Display the title of the video in the color you set in Step 6. Byline: Display the creator’s name below the title.

8Select any options you want from the Other section.

It’s best not to choose Autoplay This Video or Loop This Video because visitors like to decide when a video starts and how long to play it. Having these options selected on a video that’s being sent to the mobile platform can result in significant delays in page loading.

9When you have all the settings adjusted, click and drag to select all the code in the Get the Embed Code window and copy it.

The text in the window is highlighted when it’s selected. To copy the code, place the cursor anywhere in the code window and right-click (or Option-click on the Mac) and choose Select All→Copy, as shown.

10Open your web site in a web design program such as Dreamweaver, and paste the code you copied from Vimeo into your web page.

Here you see Adobe Dreamweaver being used to paste the embed code from Vimeo into a web page.

11If you use a blogging program such as WordPress, you can copy the code into Code view in the WordPress Dashboard editor.

To see a broader range of options for how your videos display when hosted on Vimeo, click the Settings button in the upper right corner of the video page to see the Settings page shown.