How to - Embed a Vimeo Video

 

How to Embed a Vimeo Video in a Web Page

 

OBJECTIVE:
To embed videos on your website, the best approach is to upload the video to either VIMEO.com or YoutTube.com and then "embed" the video in the web page.  The instructions below are intended to document the steps needed to embed a VIMEO video after it has been uploaded to VIMEO.  Before begining these steps, you will need to have already uploaded the video to VIMEO. 

NOTE: Please use Firefox or Internet Exporer to edit the website content.
NOTE: To embed a YouTube video, please see our How To page for embeding YouTube videos.
 

STEP 1: CREATE A NEW PAGE FOR THE NEW VIDEO
On the videos page on the website, each video is represented with an icon.

http://www.websiteparkinglot.com/webb/videos.ashx

To begin this process, create an icon for the next video and add it to the page using the normal process for adding an image.

   1a) Login to the website

   1b) Navigate to the video page

   1c) Click 'Edit' at the top of the page to open the website editor

   1d) Place the cursor at the location where the new icon should go.

   1e) Click the image button on the edit menubar

   1f) Use the 'Browse Server' button to locate the new icon
      (or upload the new icon if needed - the upload feature is at the bottom of the 'browse server' window)

   1g) Select the new icon image you just inserted and click the link button in the menu bar 

   1f) Enter the URL of the new page.

        For example: If you were adding (or linking to) the Breadyville Model video page, you would enter...

             /webb/default.aspx?page=videos-breadyville

       ... where the page that will contain the video will be "vidoes-breadyville".

        I would recommend NOT setting the target for this link (so it does NOT open in a separate window)

 
 

   1g) Once the link has been set, click the 'Save/Close' to save your changes to the 'videos' page

   1h) Click the new icon on the video page to navigate to the new page (which does not exist yet)
         The system should indicate 'page not found'.

   1i) Click 'Create Page' at the top of the webpage.

   1j) Add text to the page, such as the title of the new page.

   1k) Save/Close the newly created page.
 

 

STEP 2: UPLOAD VIDEO TO VIMEO
Webb Building Group team creates and uploads video to VIMEO.
Example: http://vimeo.com/57538516

 

STEP 3: OBTAIN THE HTML CODING FROM VIMEO
Visit the video within VIMEO.  In the top right corner of the video, click "Share".

 

 

Select the text that is in the Embed text box.  Be sure to select the entire text which goes beyond what can be seen in the window.
 


Result should be something like the following:

Breadyville Model ~ Webb Building Group from Webb Building Group on Vimeo.

 

 

STEP 4: PLACE THE COPIED TEXT INTO THE WEB PAGE
There are multiple ways to do this, but the way that seems to work the best is as follows.

  4a) Open the web page where the video should go using the website editor.  (Created in Step 1 above)

  4b) Find the location where the video should go and type ZZZ

  4c) Click the 'source' button in the menu bar of the page editor. This will open the HTML version of the page.

  4d) Search for the ZZZ.  Hint: you can use the ctrl-f to have the system find ZZZ in the text.

  4e) Copy the text from step 2 (should still be in the clip board of the computer) and paste it in place of the ZZZ.

  4f) Save/Close the page

  4g) Test the video by clicking the Play Button.

 

STEP 5: SET VIDEO SIZE AND AUTOPLAY
   5a) Open the video page for editing again as before in Step 3

  5b) Click the 'source' button  to view the HTML source code and find the VIMEO text that was pasted in step 3e.

  5c) Note in the VIMEO text that there is a "height" and "width" setting.  Modify these values to indicate the height and width of the video.  The width 700 and height 393 seems to be a good size for the web page.
      Ex.   width="700" height="393"

  5d) Find where the URL for the video player is defined.
     Ex.1  src="http://player.vimeo.com/video/57538516"

     Ex.2  src="http://player.vimeo.com/video/57538516?title=0&portrait=0"

  5e) Add ?autoplay=1 at the end of the URL path but before the final quote.

     Ex.1  src="http://player.vimeo.com/video/57538516?autoplay=1"

   OR if there are already parameters after the "?" symbol, then add &autoplay=1 to the end...

     Ex.2  src="http://player.vimeo.com/video/57538516?title=0&portrait=0&autoplay=1"

  5f) Save/Close the form and test the results.

 

FINAL: Final Code Review
The embeded code should look something like this...
 

Breadyville Model ~ Webb Building Group from Webb Building Group on Vimeo.

 

 

NOTE: Another method to embed the video is to copy the HTML text from a working VIMEO video on the Webb Building Group website.  Paste the HTML text in the new location (again, using the ZZZ text and then replacing the ZZZ text via the 'source' button).  Then modify the video URL...

        href="http://vimeo.com/57538516"

to point to the new video.  Also update any text title, etc.  This method will already contain the sizing and the autoplay, thus step 5 above is not needed.
 

 

Site map :: Contact us :: Email info@TheWebsiteParkingLot.com