How To - Embed a YouTube Video
How to Embed a YouTube Video in a Web Page
Example of end result: http://www.cpicinternational.org/cpic/video1.ashx
NOTE: To embed a VIMEO video, please see our How To page for embeding VIMEO videos.
STEP 1: CREATE A NEW PAGE FOR THE VIDEO
To begin this process, create an page for the video. Mark the location where you want to place the video with "zzz".
1a) Login to the website administration panel
1b) Navigate to the Page List
1c) At the bottom of the pag list, type the name of the new page and click 'Create'
1d) Design your page - for example, create a header/title.
1e) Put the text "zzz" at the location where the new video should go. In the example below we centered the "zzz" so that the video will be centered.
This is the location where we will paste the YouTube video embed code.
Leave this edit window open while we go get the YouTube embed code.
STEP 2: OBTAIN THE HTML CODING FROM YOUTUBE
2a) Visit YouTube and navigate to the video you uploaded.
2b) Click the 'Share' link that is located under the video.
2c) Click the 'Embed' link
2d) Copy the text that is located in the HTML text area. Be sure to copy the entire text from the beginnig to the end. Text may scroll above or below the text box window. See example blue highlight below.
2e) 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. Right click the selected text and choose 'copy' from the menu. (On an apple computer use option-click to get to the copy menu.)
At this point we are ready to paste the copied HTML code into the web page.
STEP 3: PLACE THE COPIED TEXT INTO THE WEB PAGE
3a) Return to the web page where the video should go. This page should still be open in the website editor. (Created in Step 1 above)
3b) Identify the location where the video should go - this is the location where you typed ZZZ in step 1e above.
3c) Click the 'source' button in the menu bar of the page editor. This will open the HTML version of the page.
3d) Within the HTML source code, search for the ZZZ. Hint: you can use the ctrl-f to have the system find ZZZ in the text.
3e) Note that the YouTube HTML code should still be in the clip board of the computer from step 2e above. Paste the text in place of the ZZZ.
3f) Save/Close the page
3g) Test the video by clicking the Play Button.
STEP 4: SET VIDEO TO AUTOPLAY (optional)
If desired, use the steps below to set the video to autoplay when the web page is opened.
4b) Click the 'source' button to view the HTML source code and find the YouTube HTML code hat was pasted in step 3e.
4c) Find where the URL for the video player is defined.
4d) Add &autoplay=1 at the end of the URL path but before the final quote.
OR if there are NOT already parameters after the "?" symbol (see above), then you may need to add &autoplay=1 to the end...
Note: The "?" marks the start of additional parameters, but the "&" separates the parameters. So there needs to be only one "?" at the beginning of the parameter list. That is why you may have to follow Ex1 or Ex2 based on what code the YouTube system generates.
4e) Save/Close the form and test the results. When you go to the page, the video should start to play without having to click the play button.
Don't hesitate to contact us if you have any questions!
|Site map :: Contact us :: Email info@TheWebsiteParkingLot.com|