HTML and CSS Reference
In-Depth Information
Because the video above doesn't have the
controls
or
autoplay
attributes, there's no
way to get it to play. Figure 12.8 shows the video, embedded using the following tag,
with
controls
included:
<video src=”myvideo.mp4” controls>
FIGURE 12.8
A video embedded
using the
<video>
tag, with
controls
.
CAUTION
When embedding a video, make sure that you give users some
way to control the video playback. Be conservative with
autoplay
and
loop
, too. Many users don't want a video to start playing
immediately when they get to a page. If you include the
loop
attribute and you don't include any controls, the user will have to
leave the page to stop the video.
By default, the
<video>
element will be the same size as the video in the video file. You
can change the size of the element on the page using the
height
and
width
attributes;
however, the browser will preserve the aspect ratio of the video file and leave blank
space where needed. For example, my movie was created using a 3:2 aspect ratio. If I
create a
<video>
element with a 9:5 aspect ratio, the movie will appear centered within
the element, as shown in Figure 12.9:
<video style=”background: black” src=”http://www.yo-yo.org/mp4/yu.mp4” controls
width=”675” height=”375”>
