Adobe Creative Cloud

Add Video to Your Website with Dreamweaver CC

Video content is an essential part of web page design today. Many people prefer to watch a short video rather than read content, such as learning how to refinish a table. With the evolution of HTML5 video tags, it is much easier to insert video on a page than it was previously. One large advantage of the HTML5 format is that it does not require a plug-in to run a video. Other advantages include compatibility with most browsers and the ability to use a keyboard to control the playback. To insert a video in Dreamweaver, select HTML5 Video on the Insert panel or select HTML, HTML5 Video on the Insert menu.

What do I need?

Download: travel_blog.zip

Step 1 of 6

Define a site and open the home page

Download the travel_blog folder, then extract the files.

Create a new website in Dreamweaver called Add Video Tutorial with your new travel_blog folder set as the local site folder.

Open the file index.html from your travel_blog folder. This page was created using the Dreamweaver starter template “Blog post”.

image00

 

Step 2 of 6

Add a div to serve as a video container

The easiest way to insert and position a video on a page is to place it in a div tag. The div tag can then be assigned a class or ID that can then be used to style and place the video content on the page. The video we are going to add to the index page is a video of playful elephants in an elephant rescue center in Botswana.

Open the index page, then select the last paragraph of text.

Select Insert on the Menu bar, select Div, then select After in the Wrap Tag options.

image02

Or open the DOM panel, select the Click to Add an Element icon next to the selected <P> element, select Insert After, then press [Enter] (Win) or [Return] (Mac).

image01

The new div tag appears on the page with placeholder content.

image04

Step 3 of 6

Insert a Video

Now that you have the div in place, you can insert the video content inside it.

Select the placeholder content in the new div, select the Insert panel to expand or float it, then select HTML5 Video.

Choose Nest from the Wrap Tag options.

image03

A video tag is inserted inside the originally selected div, with the placeholder content for the div to the side of the video placeholder. A controller appears at the bottom of the video placeholder for video playback. You can use the play button to play the video, drag the playhead to advance the video, pause the video, and use the speaker to control the sound volume. There is also a full screen button to enlarge the video to full screen.

image06

With the Video Placeholder selected, select the Browse for File button next to the Source text box in the Property inspector, then browse to find the file elephants.mp4 located in the website assets folder. (If you don’t see the Property inspector, select Window on the Menu bar, then select Properties.)

image05

Step 4 of 6

Edit the Video Height and Width Properties

The video appears in the div now, but is much too large for the page. You can change the Width and Height properties in the Property inspector. The standard aspect ratios for videos are Widescreen (16:9) and Standard (4:3). Setting the width and height of the video will allow you to control the size on the page. Since we are going to use the Widescreen format, we need to enter pixel measurements with a 16:9 relationship. The width must be divisible by 16 and the height must be divisible by 9, with both operations resulting with the same number. A width of 320 is evenly divided by 16 with a result of 20 (320/16 = 20). To find the height, multiply 20 by 9 to arrive at a height of 180. (180/9 = 20) keeps the aspect ratio correct.

Place the insertion point in the W (width) text box on the Property inspector, then enter 320.

Place the insertion point in the H (height) text box on the Property inspector, then enter 180.

The video is now resized to fit on the page. Save your work.

image07

Step 5 of 6

Add Alternate Sources for a Video

To insure that a video will work across all browsers, it is a good idea to add alternate video formats as alternatives for browsers who may not be able to play the original source file format. The three video formats supported by the HTML5 <video> tag are MP4, WebM, and Ogg. Chrome, Firefox, and later versions of Opera support all three formats. Internet Explorer and Safari only support MP4.

When you supply more than one video file within the <video> tag, a browser will play the first one listed in the code that it supports.

Tip: A quick way to convert a video file format is a free service provided by video.online-convert.com.

With the video placeholder selected, select the Browse for file button next to the Alt Source 1 text box to locate and select the elephants video with the webm file extension.

Add the elephants video with the ogg file extension in the Alt Source 2 text box.

Save your work.

image10

Step 6 of 6

Position the video on the page

Now it’s time to improve the appearance of the video on the page. We’ll start by placing our own text in the div to describe the video.

Double click the placeholder text to enter edit mode, then replace the placeholder text with One of the highlights of the trip! Jabu, Thiembe, and Marula!

image08

Next, we’ll assign a class to the div to add formatting.

Select the Add Class/ID button in the Element Display, type videoDiv for the Class name, press [Enter] (Win) or [return] (Mac), then select blogPostStyle.css for the source.

image09

Open the CSS Libraries panel, select blogPostStyle.css in the Sources pane, then select .videoDiv in the Selectors pane.

Uncheck the Show Set checkbox in the Properties pane if necessary, then select the Text button in the Properties pane.

Select a font-family of your choice. I selected the Gotham font-family.

Set the text-align property to center, then select the Layout button in the Properties pane.

Set the layout width to 96%, select the Show Set checkbox to show only the videoDiv set properties, then save your work.

image11

Your page should now look similar to this:

image12

Select the video image, select the Add Class/ID button in the Element Display, type featureVideo for the Class name, press [Enter] (Win) or [return] (Mac), then select blogPostStyle.css for the source.

Select blogPostStyle.css in the CSS Designer Sources pane, then select .featureVideo in the Selectors pane.

Uncheck the Show Set checkbox in the Properties pane if necessary, then select the Layout button in the Properties pane.

Select the block display, then set the right and left margins to auto.

Double-click the sentence under the video to enter Edit Mode, add a line break before the first word and after the first sentence, then save your work.

image13

Your video should look similar to this:

image14

Here is the finished page:

image15

Summary

This tutorial led you through the steps to insert a video on a web page using the HTML5 <video> tag. You began by defining a site using the data files provided.

After you inserted the video, you added code to size the video using the 16:9 aspect ratio. Next, you added two alternate versions of the same video with two different formats. This is advisable in order to provide a file that can be recognized by the most common browsers used today.

Last, you added some formatting to position the video on the page by defining two CSS classes and setting properties for each one.

As you work, it is important to view the work in progress using tools as the Scrubber, the Window size menu, the Visual Media Queries bar, and Device Preview.

Dreamweaver Interface