CSS: test sull'elemento video HTML5

Il seguente test sull'elemento video di HTML5 mette in risalto tre aspetti fondamentali dei CSS: dimensionamento, floating e posizionamento. Il rendering iniziale è comunque condizionato dai tempi di caricamento del video usato: fino a quando il video non è stato interamente caricato, le dimensioni dell'elemento appaiono non conformi a quanto specificato nel CSS. Di seguito le regole usate.

Dimensionamento

video {
	width: 30%;
	height: 20%;
	display: block;
}

Floating

.float {
	float: left;
	margin: 5px 5px 5px 0;
}

Posizionamento

li.pos {
	height: 230px;
}

.position {
	position: absolute;
	top: 4.5em;
	left: 1em;
	width: 30%;
	height: 64%;
}

Infine, la marcatura iniziale:

<div id="video">

   <ol>
   
   <li>
     <h2>...</h2>

	<video width="320" height="240" controls="controls" class="float">
  		<source src="video.ogv" type="video/ogg" />
  		<source src="video.mp4" type="video/mp4" />
  	</video>
  	
  	...
  	  	
  	</li>
  	
  	<li class="pos">
     <h2>...</h2>

	<video width="320" height="240" controls="controls" class="position">
  		<source src="video.ogv" type="video/ogg" />
  		<source src="video.mp4" type="video/mp4" />
  	</video>
  	
  	<p>...</p>
  	
  	</li>

  	
  	
  	</ol>

</div>

Potete visionare il test in questa pagina.