Comment insérer une vidéo

Pour animer un peu cette page web, et parce que les vidéos sont un élément très partagé dans les réseaux sociaux, nous allons ajouter une vidéo. En utilisant bien entendu la balise HTML 5 video qui permet d’afficher simplement des vidéos sans avoir recours à une application.

Code pour l’ajout de la vidéo

Grâce au HTML 5 on peut ajouter simplement une vidéo dans une page

A la première image a été ajouté la vidéo

Exemple HTML avec CSS intégré

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="description" content="We provide free flash templates, free 
templates, free flash header"/>
<title>My test page</title>
<style type="text/css">
h1 {margin-top: auto; margin-bottom: 2px;}
h2, h3 {margin-top: auto; color: #96bd22; }
a:link {color : #df7b10; text-decoration : underline; }
a:hover {color : grey; text-decoration : none;}
body {background-color: #000000; color: #dfdfe0; text-align: left; width: 
99%; height: 99%; font-family: 
"Trebuchet MS", Arial, Helvetica, sans-serif; }
header {float: left; width: 100%; height: 10%; }
nav {float: left; width: 20%; height: 80%; }
section { float: left; width: 80%; height: 80%; }
article {float:left; width: 50%; text-align:left; }
footer {float: left; width: 100%; height: 10%; }
.align-text {float:left;}
.under-image {clear: both; }
#line {padding: 0px; margin: 0px; border: solid 1px #dfdfe0; width: 99%}
</style>
</head>
<body>
<header>
<h1>MY FIRST PAGE</h1>
<div id="line"></div>
</header>
<nav>
<h3>Menu</h3>
<ul> 
    <li><a href= "#">Page 1</a></li>
    <li><a href= "#">Page 2</a></li>
    <li><a href= "#">Page 3</a></li>
    <li><a href= "#">Page 4</a></li>
</ul>
</nav>
<section>
<video controls src="http://youtu.be/bEVEsIW4OXo" type="video/webm" width="90%" 
poster="example-73-img.jpg" width="90%"></video>/*On a remplacé le paragraphe 
contenant l’image par une vidéo, dont le poster est l’image précédente. Il est 
préférable d’ajouter le type de la vidéo, voire de proposer plusieurs des formats
utilisés, les navigateurs ne lisant pas les mêmes formats…*/
<p>Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem 
Aginatium inpulit iam inde a priscis maioribus nobilem, locuta est pertinacior 
fama.</p>
<article>
<p><img src="http://upload.wikimedia.org/wikipedia/commons/8/89/Waterfall_Montagne_d_Ambre_MS5563.jpg" 
width="30%" hspace="10"/></p>
<h3>Fanni</h3>
<p>Tu autem, Fanni, <a href= "#">quod mihi tantum tribui</a> dicis quantum 
ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte 
iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam,
ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit!  memineram
Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.</p>
<p>Aut enim nemo, quod quidem magis credo, aut si quisquam.</p>
</article>
<article>
<p><img src="http://upload.wikimedia.org/wikipedia/commons/9/9f/Kondor1_gro%C3%9F.jpg" 
width="30%" hspace="10"/></p>
<h3>Stimulos admovente</h3>
<p>Adolescebat autem obstinatum propositum erga haec et similia multa scrutanda, 
stimulos admovente regina, quae abrupte mariti fortunas trudebat in exitium 
praeceps, cum eum potius <a href= "#">lenitate feminea ad veritatis humanitatisque.
</a></p>
<p>Nec enim super hoc ulla documentorum rata est fides.</p>
 </article>
</section>
<footer>
<div id="line"></div>
<p>Créasite © 2013</p>
</footer>
</body>
</html>

Voir la démo Télécharger l’exemple