Web-Infos
  • Criar um site
  • Checkout
  • Le HTML5
  • CSS 3
  • Propriétés CSS
  • Balises HTML5
  • Faire son site internet
  • Téléchargement
Accueil » Comment insérer une vidéo
  • Comment créer une page web avec un éditeur
  • Comment changer la couleur du background d’une page web
  • Création du header et du footer d’une page web
  • Comment faire des liens
  • Créer le layout d’une page web
  • Comment faire des effets sur les liens dans une page web
  • Comment modifier la police de caractère d’un site web
  • Comment créer une ligne horizontale dans une page web
  • Comment insérer une image
  • Comment aligner des images et du texte dans une page html
  • Comment insérer une vidéo
  • Comment mettre de la musique sur son site
  • Comment mettre une page web en ligne

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.

 

Aperçu du code HTML pour l'ajout de la vidéo

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

  • Balises HTML5
  • Propriétés CSS
  • Livre d’or
  • Conditions générales
  • Contact