Tutorial #9
Embed a Vimeo Video Basic   2013-11-04

Introduction

Vimeo is a service for managing and sharing videos. It is similar to YouTube but, in my opinion, tends to have higher quality content, both technically and artistically.

Just like with YouTube, you may find yourself needing to embed a Vimeo video in your page. Just like YouTube, this is very easy and the result will look something like this:

Screenshot of the demo for this tutorial


Step by Step

1: Go to vimeo.com and find the video that you want to embed.

2: In the top right hand corner click on the Share icon in the top right. This brings up this Share dialog - click on the button with the angle brackets on the right.

Screenshot of the demo for this tutorial

3: In the Embed that now appears you will see a box with the code for embedding. You can copy and paste this into your page directly. But to apply a bit more control, click on the Customize this embed.

Screenshot of the demo for this tutorial

4: A vimeo page now appears and this is quickly overlaid by a Share This Video dialog that shows a number of options.

Screenshot of the demo for this tutorial

You can change the color of the text and control the information that is displayed, etc. These can be ignored in most cases. But the option that you might want to change is the Size.

Many videos have an aspect ratio of 4 : 3 (e.g. width 400px height 300px) but many Vimeo videos are in 'wide screen' 16 : 9 format, like this demo. Be sure to preserve the aspect ratio if you change the size. It will still work if you get this wrong but Vimeo will make the video in the correct ratio fit into your size by adding black padding as needed.

5: Copy and Paste the code in the Embed box into your web page, save and reload.


Understanding the Code

The code here consists of an iframe which loads the Vimeo player and the target video as its src. The width and height are defined along with some custom tags like allowfullscreen which the player will detect and use in its configuration.

All Vimeo videos have a unique id - e.g. 49643332 you can change this in a Vimeo URL to point to the target video.

Try changing the width and height and use a different video id.

The example here uses a beautiful time lapse video of scenery in Iceland from from The Upthink Lab (http://player.vimeo.com/video/49643332)


Code for this Tutorial


Share this tutorial


Related Tutorials

4 : Embed a YouTube Video   (Basic)


Comment on this Tutorial


comments powered by Disqus