Inserting HTML5 Video Content - Dreamweaver CS6

In this video you'll find out how easy it is to insert video content into an HTML5-based web page in Adobe Dreamweaver CS6.

Single Video Type

To add a single video type:

  1. Go to Code View.
  2. Scroll to where you wish to add the video in the code document.
  3. Insert the following tags:
    <video src="videofilepath/videofilename.videotype" width="##" height="##" controls>
    </video>
Note: videofilepath/videofilename.videotype and ## are simply place holders for actual values. In order for the given code tags to work, you will need to add in the proper information as indicated by the placeholders.

Multiple Video Type Sources

Some browsers parse the HTML5 codec differently. By adding multiple video type sources into your code, you can avoid the possibility of a potential site visitor not being able to see your video content.

To add multiple video type sources:

  1. Go to Code View.
  2. Scroll to where you wish to add the video in the code document.
  3. Insert the following tags:
    <video width="##" height="##" controls>
    <source src="videofilepath/videofilename.videotype" type="video/type/>
    <source src="videofilepath/videofilename.videotype" type="video/type/>
    </video>
  4. You can keep adding in more video sources by using the <source src="videofilepath/videofilename.videotype" type="video/type/> code line with the applicable information.
PROTIP: You can have the video file automatically fill in the videofilepath/videofilename.videotype by pressing enter after inputting "source src=".

Dreamweaver has additional helpful coding features. By pressing enter after inputting a source code, a popup will appear. Pressing enter again to browse and select your file directly.

What's New in Dreamweaver CS6


Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.