4. Embedding Video

 

This section will give a brief explanation of embedding video in a web page. However, this will only produce video on most browsers. A more comprehensive treatment is covered at W3C Video Tag. The first example will be when the video file resides on the web server with web page. The second example will be when the video file reside on YouTube.

 

Video Example 1: Video on Same Sever with Web Page

 

A sample video tag is shown below. The width and height attributes define the viewable size. The controls attribute allows video play controls to be visible. Note the the video tag itself has begin and end tags, while the source tag is a single tag. The example shows the Promo2a.mp4 file in a folder called Videos wher the Videos folder is contained in the folder as the page being viewed. The video displayed below was displayed with the code shown.

 

<video width="320" height="240" controls>

   <source src="Videos/Promo2a.mp4" type="video/mp4">

</video>

 

0:24

 

 

Video Example 2: Video on YouTube

 

YouTube solves at least to major problems when using videos. The code is setup to work on as many different browser computer combinations as possible and YouTube will generate the html code to embed the video in your own page. To get the HTML code for your web page, go to YouTube and view the video of interest. Then right click on the video. One of the options will be copy embed code. Select the option. Then you can paste the code into your HTML file.

 

The first line of sample code below was pasted from YouTube. In the second line, http: was added to the URL so that the code would work if the page were opened as a local file, rather than being opened from a web server, where the http: is added by default.

 

<iframe width="640" height="360" src="//www.youtube.com/embed/CxlTx8mmJEA?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

<iframe width="640" height="360" src="http://www.youtube.com/embed/CxlTx8mmJEA?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

 

Back to Table of Contents