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">
<meta charset="UTF-8">
<title>CH6EX2: Basic HTML5 Video With Controls</title>
<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"'>
(Autoplay, Loop, Controls)
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
Search WWH ::

Custom Search