HTML and CSS Reference
In-Depth Information
3.
Now add a
<video>
element to this new
<div>
.
<video></video>
4.
Set the
src
attribute on the
<video>
element to point to the
mikethefrog.webm
file in your
videos
folder.
<video
src="videos/mikethefrog.webm"
></video>
5.
Set the
width
attribute to 400 and the
height
attribute to 225.
<video src="videos/mikethefrog.webm"
width="400" height="225"
>
</video>
6.
Add an
id
attribute to the
<video>
element and set its value to
myVideo.
<video src="videos/mikethefrog.webm"
id="myVideo"
width="400" height="225">
</video>
7.
Now add a
controls
attribute to the
<video>
element. This prompts the browser to display its default
video controls. Later in this chapter, you will replace these with your own custom controls.
<video src="videos/mikethefrog.webm" id="myVideo" width="400"
height="225"
controls
>
</video>
8.
Save the
about.html
file.
If you load up the About page in your web browser, you should see that your video appears to the left of the page
text, as shown in Figure 11-1. Click the Play button to ensure that the video will start playing.
