How To - Embed a YouTube Video

 

How to Embed a YouTube 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 YouTube video after it has been uploaded to YouTube.  Before begining these steps, you will need to have already uploaded the video to YouTube. 

 

Example of end result: http://www.cpicinternational.org/cpic/video1.ashx

NOTE: Please use Firefox or Internet Exporer to edit the website content.

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
Visit the video within YouTube and copy the Share > Embed code.


NOTE: Your video should already be uploaded to YouTube before beginning this step.  For instructions on uploading YouTube videos, see the instructions and tutorials on their website.
 

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.


   4a) Open the video page for editing again as before in Step 3

  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.
     Ex.1  src="http://www.youtube.com/embed/)7vevSf8Kgw?list=UUxliqUsPkxAiHnD-Wa3qQqw"

  4d) Add &autoplay=1 at the end of the URL path but before the final quote.

     Ex.1  ...?list=UUxliqUsPkxAiHnD-Wa3qQqw&autoplay=1"


 

   OR if there are NOT already parameters after the "?" symbol (see above), then you may need to add &autoplay=1 to the end...

     Ex.2  src="http://www.youtube.com/embed/)7vevSf8Kgw?autoplay=1"



 

   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.

 


Example of end result: http://www.cpicinternational.org/cpic/video1.ashx

 

Don't hesitate to contact us if you have any questions!

 

 

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