a project by the
 
Home   Virtual Site Visits   For Foundations   For Nonprofits  Subscribe     Who are we?
How To Embed Your Vimeo Video into Your Website
by Rachel L. Fisher - June 4, 2008
Step 1: Getting Started
Here is a video tutorial by the Vimeo staff about the features you can change in Vimeo before you embed.


Embed Customizer from Vimeo Staff on Vimeo.

Step 2: Making Adjustments
I do have one extra bit to add to what the Vimeo staff has said. You may notice that in Vimeo the title of your video and your Vimeo name and a link to the Vimeo site appears below the video. This is great for other people's websites, but you may not want it there. Viewers on your website already know your name, you may already have your name visible elsewhere, and/or you may just not want it there at all.

This step is not essential it is a preference, so you can either SKIP down to Step 3, or follow the directions here to remove the name and link.

In order to do this work, you must copy/paste your code into a "safe place to work." Something like a Word doc, notepad, or draft email. You'll work with your code there, then when you're done, you'll copy/paste it back into your website.

If you know how to work with html code, you can make this change in the program you use to edit your website code. You may, however be more comfortable copy/pasting it into a safe place to work with it first.

This is what your video will look like if using the code directly from Vimeo:

Tenderloin Neighborhood Development Corp - After School Program from Frieda C. Fox Family Foundation on Vimeo.

This is what your code should look like when you paste it into your website or safe workplace:
<object type="application/x-shockwave-flash" data="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" height="300" width="400">  
<param name="quality" value="best" />    <param name="allowfullscreen" value="true" />  
<param name="scale" value="showAll" />    <param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" /> </object> <br /><a href="http://www.vimeo.com/856405/l:embed_856405">Tenderloin Neighborhood Development Corp
- After School Program</a> from <a href="http://www.vimeo.com/fcfox/l:embed_856405">Frieda C. Fox Family Foundation
</a> on <a href="http://vimeo.com/l:embed_856405">Vimeo</a>.

The PURPLE code above, between the instances of the word  "object" is the code you need, so be sure NOT to change any of that code.

Place your cursor after the second "object" tag, before the tag with "br."  Hit return a few times to separate the purple from the black code so you can work with it separately. Highlight the second piece of code (the black text).

Your code should now look like this:
<object type="application/x-shockwave-flash" data="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" height="300" width="400">  
<param name="quality" value="best" />    <param name="allowfullscreen" value="true" />&nbsp; 
<param name="scale" value="showAll" />   &nbsp;<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" /></object>

<br /><a href="http://www.vimeo.com/856405/l:embed_856405">Tenderloin Neighborhood Development Corp - After School Program</a> from <a href="http://www.vimeo.com/fcfox/l:embed_856405">Frieda C. Fox Family Foundation</a> on <a href="http://vimeo.com/l:embed_856405">Vimeo</a>.

Now, DELETE the highlighted section. Ok, now highlight the remaining code (the purple) and COPY/PASTE it back into your website. Step 3 has more information how to do this.

Step 3: Paste in the video's code to Embed in your site.
Don't be daunted by the length of these instructions! The steps depend on how your organization manages your website, choose the option below that best fits your situation!

Option A: For organizations that have a person or company that manages your website.

Send an email to that person or company, letting them know two things:

1) where in your site you would like to place the video, and

2) the code you just copied, in step two. So, "paste" the code into the email (using the "Edit" menu or other pasting method you know). Give them the go-ahead, and they'll embed the video for you.

Option B: You don't know a lot about websites, but you use a program like MS Frontpage or Adobe Dreamweaver and do it yourself.

This may be a little tricky, but you can do it! Dreamweaver will be a little bit easier for you, if you can choose which program to use.

When you open your program, it takes you to the front page of your website. Decide which page you want your video to appear on. You can place the video on your main index page, or any other page on your site. You could also create a separate page in your site just for displaying your video and then link to it elsewhere on your site. This is your choice, but be sure to give your video strong visibility.

Once you have pulled up the page you want, place your cursor in the window and "Paste" the code in. (Use your Internet browser's "Edit" menu or your favorite other method to "Paste" your code.)

You may all done now! But, you should test the page to see if displays properly. Different website management programs treat this code in different ways!

Your program should show you right on the screen what it looks like, however if you are not connected to the Internet you may just see blank space where you placed the video, since your program needs to access the Vimeo page from the web to display your video.

If there is a blank space where your video should be, then your program will require you to "save" your work, and then go visit your website online to see how it looks. In that case, you may want to test it out by embedding it on a page that isn't linked to other pages, as a beta test, or, doing this process late at night when you likely do not have very many viewers, because you're working right on your "live" website.

Troubleshooting a common problem: "I copied and pasted the code, but when I check the website, all I see is the code just printed on my site."

The Fix: Your website management program thinks that this is plain text rather than code, so here's what you do:

First, delete the code - we'll have to try again in a different "view" mode. (Delete can be done using the "Undo" option in your "Edit" menu, or the undo arrow, or any other delete option on your keyboard or browser).

Now, to edit the code directly, we'll need you to be in "Code View" or "HTML View" depending on what your program calls it. Most programs have an option near the top of your screen that will allow you to change the "view" you're working in. You can switch back and forth between the "Design View" mode and the "Code View" mode. If you don't see such a toggle button, try looking in the "View" menu in your program's main menu, and look at the options. You'll probably see something like "Design View" and "Code View" as Dreamweaver calls them. If you still can't find this, please refer to your program's Help files to switch to the "Code View" or "HTML View" mode.

Note: Some programs, like Dreamweaver, let you use a "Split View" option which will let you see your pages in "Design View" and "Code View" at the same time, which is quite helpful!

Now, let's work with the code and put your cursor exactly where you want the video to appear.

Code looks a bit odd if you are not accustomed to looking at HTML code. If you place your cursor in the position on the screen where you wish to place your video while in "Design View" mode, your cursor should still be in that spot when you switch to "Code View" mode. If not, you may need to do some trial and error. Be sure you don't click "Save" until you are sure things look just right. Before you "Save" you have the option of closing the page, and everything goes back to the way it was, no damage done.

When you've got your cursor in the right location, within the code, "Paste" in the Vimeo code we copied earlier.

Then go back to your "Design View" mode or test online and see how it looks.

If you want to include text beside your video on your website, read on to Option D where we show you some added table code that can help you. You should also have table options in your program that can help you with this if you'd like to try it on your own.

Option C: You use a blog program to run your organization's website.

Log into your blog program. (It doesn't matter if you use blogger, typepad, myspace or something else entirely). Create a new post as you would in any other situation. Give your post a title and anything else you would normally do when updating your site. Place your cursor in the blog post window where you would normally write something and "Paste" the video code.

You should be done, but if you look online and all you see is code instead of a video, go to the Option B's "Common Problem" box, above. Copy the text you wrote so you don't have to rewrite it later and then delete that blog entry.

Option D: You know how to code, so you build and manage your own website.

If you fall into this category you most likely know what to do with the code now, but, in the interest of helping everyone, here are instructions.

You will likely want to place your video code into table code so that you can align a paragraph of text beside the video. Here, we will build a very basic table to display your video which can be inserted into your current website.

Example Of Single Video Embedding Table

You can put all the text that you want here. Tell us about your organization, program, video. Sell us on you. And don't forget to throw in a link to your donation information or directly to online donation form!

Click to see this example larger and on its own page


The Code To Build The Above Example:
<!-- Text in green --> = this text is a note explaining what a piece of code does. The arrow like pieces at either side make it invisible when it remains in the code of your site.

<table border="0" cellpadding="5" cellspacing="0" width="800"> <!-- This tag begins a table. There are also other attributes added to the table.
"border = "0"" = this keeps a line border from appearing around the table. If you want a border simply change this number to 1 or something higher depending on how wide you wish the border to be.

"cellpadding and cellspacing" = these attributes refer to the amount of space around each cell in the table. You can use these to affect the spacing and look for your table. If there is not enough space between your video and the text beside it, change the cellpadding from "5" to "10", see what it looks like. If it is still not quite right, try different numbers in there until it looks right to you.

"width="800"" = this defines how wide the table will be in pixels. 800 pixels is a standard width for a website that will fit on the average computer screen. You may need to make your table smaller if you are placing this table inside a page that has more information (such as navigation menus, pictures, etc.) on the page. -->
<tr> <!-- This tag begins a table row. Each row may have several data cells inside it. This row has 2 data cells -->
<td> <!-- This tag begins the first data cell containing your embedded video. --> Now that you understand this code you can modify it for your organization.
<object type="application/x-shockwave-flash" data="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" height="300" width="400">  
<param name="quality" value="best" />    <param name="allowfullscreen" value="true" />&nbsp; 
<param name="scale" value="showAll" />   &nbsp;<param name="movie" value="http://www.vimeo.com/moogaloop.swf?clip_id=856405&amp;server=www.vimeo.com&amp;
fullscreen=1&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF" /></object>
<!-- This is the code that embeds your video. Replace all code in purple with the code you copied from your Vimeo Site. -->

</td> <!-- This tag ends the data cell containing your embedded video. -->

<td valign="top"> <!-- This tag begins the second data cell in this row. This data cell contains your text. This cell has an attribute: "valign='top'" this means vertical align top, which makes all the text within this data cell begin at the top of the cell. -->

<b>Example Of Single Video Embedding Table</b> <!-- Header for your text. The tags labeled <b> and </b> make the text in between appear in bold. -->

<br><br> <!-- <br> = Break. Each <br> tag creates a hard return break. -->

You can put all the text that you want here. Tell us about your organization, program, video. Sell us on you. And don't forget to throw in a link to your donation information or directly to online donation form!<!-- Your text here. -->

</td> <!-- This tag ends the data cell containing your text. -->

</tr> <!-- This tag ends a table row. -->
</table> <!-- This tag ends a table. -->

Now that you understand this code you can modify it for your organization.

1. Replace the Purple code with the code that you copied from the Vimeo site earlier.

2. Replace the header and description with information about your own video.

3. Determine where in your website you want your video to appear, and then open the file for that page.

4. Select all of this code, "Copy" the code and then "Paste" it directly into the code of your website in the location that you want this video to appear. All of my text in green or between tags that look like this: are fine to stay there. You can remove those if you wish, but if you choose not to, they'll stay invisible on your page. You will see them only in the code. They may serve as a good reference, for later.

5. Save your page and check it out online. You may want to do this late at night or during a time when not many people are looking at your website, in case you find mistakes.

Step 4: Congratulations!
Your Virtual Site Visit video is embedded on your site!

That's it, you are done. You can now use your website to give a "virtual site visit" to potential donors, volunteers, clients and everyone!

Check back soon, for more How-To articles! And, please share your stories about how you use your virtual site visit with us and others!

 
 

Find by Topic   Find by Date    

 case studies (1)

 how to (4)

 informative (0)
 
© 2008 Frieda C. Fox Family Foundation