How to Insert Audio and Video Files in Dreamweaver - dummies

How to Insert Audio and Video Files in Dreamweaver

By Janine Warner

Although you can use Dreamweaver to insert video files directly into a web page, our best advice is to use one of the video-hosting services, such as YouTube or Vimeo.

When you select Media from the Insert menu, you find multiple video and audio options. If you want to insert video files that are in one of the older and more proprietary formats, such as Windows Media Video (.wmv) or QuickTime (.mov), you choose the Plugin option from the Media drop-down list in the Insert menu.

If you want to use the latest video formats using the HTML5 video tag, you can insert video in the MP4, webM, or Ogg Theora formats by following these steps:

  1. Click where you want the file to appear on your web page.

  2. Choose Insert→Media→HTML5 Video.

    You can also click the drop-down list in the Insert panel, choose Media, and then select HTML 5 Video. A small gray box containing a film icon appears in your design.


  3. Click the small gray box containing a film icon.

    The Video properties are displayed in the Property Inspector at the bottom of the screen.

  4. In the Source field in the Property inspector, enter the URL to your video file or select the Browse icon and then select a video file on your hard drive.

    After you selected the file, the path and filename appear in the Source window.


  5. (Optional) Use the Alt Source 1 and Alt Source 2 fields to enter the URL or browse and select video in additional formats.

    One of the complexities of using the HTML5 video tag is that you can use it with three video formats: mp4, Ogg Theora, and webM. If you want your video to play in all popular web browsers, you need to include the video in all three formats.

    You see that all three source fields are filled in with videos in each of these formats. Additionally, you can include a Flash video for older web browsers in the Flash Fallback field.

    If you think it’s crazy to have to embed four different video files in four different formats, you’re not alone. This complexity is due to the lack of agreement among browser companies about what format is best for video.

    Another advantage of using Vimeo or YouTube, to host your videos is that you can upload a video in just one format, and YouTube and Vimeo convert it and deliver it in all these formats automatically.

  6. Enter the height and width in the H and W fields, respectively, of the Property inspector.

    When you add audio or video, Dreamweaver doesn’t automatically determine the height and width of the file, so you need to add the dimensions in the Property inspector after you insert the file.

  7. Save the page and click the Preview (globe) icon (at the top of the work area) to open the page in a browser, to ensure compatibility.

    Not all video formats will play in all browsers. Test your video to make sure that it plays at least in the browser that you’re targeting as your primary destination. If you’ve set the file to Autoplay, your file plays automatically when the page loads into the browser. Otherwise, your browser inserts a simple controller so that you can start, pause, fast-forward, and rewind the video.