How to - Embed a Vimeo Video
How to Embed a Vimeo Video in a Web Page
STEP 1: CREATE A NEW PAGE FOR THE NEW VIDEO
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
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...
... 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)
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
STEP 3: OBTAIN THE HTML CODING FROM VIMEO
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.
STEP 4: PLACE THE COPIED TEXT INTO THE WEB PAGE
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
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.
5d) Find where the URL for the video player is defined.
5e) Add ?autoplay=1 at the end of the URL path but before the final quote.
OR if there are already parameters after the "?" symbol, then add &autoplay=1 to the end...
5f) Save/Close the form and test the results.
FINAL: Final Code Review
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...
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|