video element. Before digging into details, an important thing to bear in mind is the choice of the video format. Just to be on the safe side, in HTML5 you should always use a Theora format, namely a file that either has the extension .ogg or ogv. By doing so, you make sure that your video will work in all supporting browsers (at the time of this writing, Safari, Opera, Chrome and Firefox). For this test, I've downloaded a video from YouTube and converted it using Miro on my Mac. All the markup we need for this test is just the following:
<div>
<video src="video.ogv" controls="controls" width="400" height="350"></video>
</div>
The controls attribute specifies whether our video should have a control bar at the bottom of it (like the control bar of YouTube's videos). In this test we're going to use:
- display: to turn the video into a block-level element (default is
inline-block) - padding, border: to test if this element accepts padding and borders
- background: does this element accept background-related properties?
- width, height: to test if this element reacts properly to dimensions specified in CSS, thus overriding its attributes
- border-radius: is it possible to use rounded corners?
- margin: do margins work as expected on this element?
- position: can this element be positioned?
- transformations: can we use CSS3 transformations on it?
Here's the CSS code:
video {
display: block;
padding: 1em;
border: medium solid gray;
background: url(video.jpg) no-repeat 50% 1em;
width: 500px;
height: 450px;
-moz-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
position: relative;
left: -2em;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
Results
This test works similarly in Firefox, Chrome and Opera. Safari has problems loading the video.
Test
The video is 27 Mb in size, so it will take a little bit to load.