HTML and CSS Reference
In-Depth Information
Figure 6-2. HTML5 video embed with controls
You can see the full code in
Example 6-2
.
Example 6-2. HTML video with controls, loop, and autoplay
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH6EX2: Basic HTML5 Video With Controls</title>
</head>
<body>
<div>
<video autoplay loop controls id="thevideo" width="320" height="240">
<source src="muirbeach.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="muirbeach.webm"type='video/webm; codecs="vp8, vorbis"' >
<source src="muirbeach.ogg" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div>
(Autoplay, Loop, Controls)
</div>
</body>
</html>
Altering the Width and Height of the Video
In our first example, we showed how you could embed a video without changing the
default width or height. However, there are many good reasons why you might want
to change the default width and height of a video in the HTML page, such as fitting it
into a particular part of the page, or enlarging it so it is easier to see. Similar to embed-
ding an image into HTML with the
<img>
tag, a video will scale to whatever
width
and
height
you provide in the
<video>
tag. Also, like with the
<img>
tag, this scale does not
