Setting up the HTML and video element

- Now to begin the project let's go to the exercise files. Let's open up Index.html up in the text editor. Now once you have the file open you'll see this is a basic html file. We have our main html element. We have our heading area and the body area. The only thing I've done so far is hook in a css file. So we're linking to the assets/styles.css file. I also have a meta tag with a viewport setting so that we can use responsive rules later on in the course as well. The first thing we're going to do is come down inside of the body area.

Let's delete the html comment that says markup goes here, and let's add in our first outermost container. We're going to start with a div element. We'll type div space. Let's add a class of promo. Let's end the tag, and then let's end the element. I'll come in here and format this and split this open. Next we'll add an image tag to link in the logo.sbg, and then we'll add a div container for our caption and put in a headline.

Let's start with our image tag. Let's set the source = assets/logo.svg. Let's end that tag. Next we'll add a div tag with a class of caption. Inside here we'll put a paragraph element, and then we'll type "Try our new baked goods." Let's end the paragraph tag, and then let's end the div tag.

Now with that in place I'll just format this a little bit, get rid of some of the extra space. Now inside of this div with a class of promo, let's add our video element. I'm going to come over here and get my cursor above the image tag. Let me hit an extra space. I want the video to be the first item here so that when we start absolute positioning elements, those elements will be above the video object. So I'll start with a video tag, then a space, and the only attribute we're going to set in here is going to be autoplay. Now you can leave this as just simply autoplay, or you can set autoplay equal to a value.

I like to do autoplay = just autoplay, and then end the video element. Let me format this. Let me split this open. Now what we're going to do is we're going to put two individual sources for the html 5 video. Each of these source elements will alert the browser to the different videos that are available, and then the browser can point to the file that it wants to use. In most cases, the mpeg4 file format's going to work. However, with Firefox, Firefox wants the ogv file instead.

So inside of the video element we're going to add two source tags. First is going to be source space src = assets/muffins.mpeg4 We'll set the type to video/mpeg4, and then we'll add another source element with the source equaling assets/muffins.ogg. Then we'll set the type on this to video/ogg.

Now with this html markup in place we have enough to at least see the video placed in the page, as well as our svg graphic and the caption. Let's save our html. Let's go back to the exercise files, and let's open up index.htlm up in a browser. Now in a browser we can see the video playing. We can also see the svg graphics showing up under the video. If we scroll down we'll also see our text showing up here as well. Now with these elements working properly, next we'll add some css rules to position and style these elements.