New Users | Log In
| Contact Us

You are here: meGB Work

GB Work


Go to GBLEARN

Topic:  Adding Video media to your website using Object & Embed Attributes

Description:

This tutorial provides a brief overview on how to effectively add video media to your website, using both HTML5 and HTML standards. Adding video media can be added to a site using three different elements:

  1. An <object> attribute, or
  2. An <embed> attribute, or
  3. An <iframe> attribute

 

How to add video to a website in HTML5 using an Object (<object>) attribute:

In this step, you will need to add the HTML code (see below) under the <body> section of your page, while also identifying:

  1. Object height/width
  2. The video source (ie. The path to the directory in which the video, which you wish to show, is currently added to.

The HTML code to add a video using an object attribute will look like this:

<!DOCTYPE html>
<html>
<body>
 
<object width="(insert width)" height="(insert height)"
data="(insert video source URL or path to directory)">
</object>
 
</body>
</html>

 

As an end result, the code to view a video on your website can look as such:

 
<!DOCTYPE html>
<html>
<body>
 
<object width="320" height="250"
data="http://rajeevmukherjee.com/file_depot/0-10000000/0-10000/203/folder/1133747/deepak_chopra.swf">
</object>
 
 </body>
</html>

 

And the video displaying as:

 


How to add video to a website in HTML5 using an Embed attribute

In this step, you will need to add the HTML code (see below) under the <body> section of your page, while also identifying:

  1. Object height/width
  2. The video source (ie. The path to the directory in which the video, which you wish to show, is currently added to.

The HTML code to add a video using an object attribute will look like this:

           <!DOCTYPE html>
           <html>
           <body>
 
           <embed width="(insert width)" height="(insert height)"
            src="(insert video source URL or path to directory)">
        
      </body>
           </html>

 

As an end result, the code to view a video on your website can look as such:

          <!DOCTYPE html>
          <html>
          <body>
 
          <embed width="420" height="315"
          src="https://www.youtube.com/v/32o2Lr5_cpI">
         
 
          </body>
          </html>

 

And the video displaying as:

 


How to add video to a website in HTML5 using an iFrame attribute:

In this step, you will need to add the HTML code (see below) under the <body> section of your page, while also identifying:

  1. Object height/width
  2. The video source (ie. The path to the directory in which the video, which you wish to show, is currently added to.

The HTML code to add a video using an object attribute will look like this:

           <!DOCTYPE html>
           <html>
           <body>
 
           <iframe width="(insert width)" height="(insert height)"
            src="(insert video source URL or path to directory)">
            </iframe>


           </body>
           </html>

 

As an end result, the code to view a video on your website can look as such:

          <!DOCTYPE html>
          <html>
          <body>
 
          <iframe width="420" height="315"
          src="https://www.youtube.com/embed/Twcual3tGbc">
          </iframe>
 
          </body>
          </html>

 

And the video displaying as:

 


Where and Why to Use?

  1. The use of videos on websites allow for an illustrative interpretation of the page content, providing an interactive user experience.

  2. The evolution of technology and the advancement of HTML5 has enabled websites to display videos on sites using object and embed coding attributes to control how the video will be displayed and shown.

  3. The use of videos on websites can necessarily drive increase Search Engine Optimization(SEO), driving more visitors to the respective website.