Insérer une vidéo sur la home page

Résolu

cindyy -
cindyy - 30 mai 2013 à 15:58

Bonjour,

J'aimerais insérer une vidéo juste en dessous de mon menu horizontale qui ferais la 100% de l'écran. Par dessus il y aurait une opacité et un lien au milieu avec un titre qui lancerai la vidéo. Si quelqu'un a une idée de comment je peux faire ça, ça m'arrangerais.

Merci d'avance.

Afficher la suite

A voir également:

Insérer une vidéo sur la home page
Insérer une vidéo sur powerpoint - Guide
Comment supprimer une page sur word - Guide
Montage video windows - Guide
Comment télécharger une vidéo youtube - Guide
Nommez une application d'appel vidéo ou de visioconférence - Guide

9 réponses

Réponse 1 / 9

Utilisateur anonyme

Salut, c'est ca que tu veux ?

si oui dis moi et je t'explique...

http://trucpourccm.franceserv.com/

Réponse 2 / 9

cindyy

Oui c'est bien ça que je voudrais faire.

Réponse 3 / 9

Utilisateur anonyme

Salut, alors explication...il va falloir avoir des bases de html/css.

si tu fais click droit/afficher code source tu obtient ça :

<html>
 <head>
  <title> cindyy</title>
  <meta charset="UTF-8" />
  <style type="text/css">
   #opac{
    position: absolute;
    background-color: black;
    opacity: 0.8;
    z-index: 100;
    height: 515px;
    width: 100%;
   }
   iframe{
    z-index: -100;
   }
   #click_here{
    color: white;
    font-size: 2.5em;
    left: 45%;
    top: 240px;
    z-index: 200;
    position: absolute;
   }
  </style>
 </head>
 <body>
  <div id="opac"></div>
   <span id="click_here">Tu clique ici</span>
  <iframe id="video" width="100%" height="515" src="https://www.youtube.com/embed/l6ZV0JBa1Tk?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
 
  <script type="text/javascript">
   var vid = document.getElementById("video");
   var op = document.getElementById("opac");
   var cli = document.getElementById("click_here");
   
   cli.onclick = function(){
    op.style.display = "none";
    cli.style.display = "none";
    vid.src = "https://www.youtube.com/embed/l6ZV0JBa1Tk?autoplay=1";
   }
   
  </script>
 </body>
</html>

Pour mettre une vidéo youtube tu va sur youtuble et tu fait partager/integrer et tu obtiens un truc de ce genre

<iframe id="video" width="100%" height="515" src="https://www.youtube.com/embed/l6ZV0JBa1Tk" frameborder="0" allowfullscreen></iframe>

"https://www.youtube.com/embed/l6ZV0JBa1Tk" ca c'est le lien de ta vidéo

tu rajoute au bout ca : ?wmode=transparent"

ce qui fait "https://www.youtube.com/embed/l6ZV0JBa1Tk?wmode=transparent"

il reste maintenant à mettre ca : wmode="Opaque" ou tu veux , à la fin si tu veux.

ensuite

<div id="opac"></div>

c'est ce qui va faire l'opacité

dans :

#opac{
    position: absolute;
    background-color: black;
    opacity: 0.8;
    z-index: 100;
    height: 515px;
    width: 100%;
   }

la ligne opacity: 0.8 c'est la valeur de l'opacité. 1 c'est le max et 0 le minimum

<span id="click_here">Tu clique ici</span>

ca c'est ce que tu doit cliquer, tu peu mettre autre chose si tu veux comme une image cela n'a pas d'importance, mais garde id="click_here"

et à la fin de ta page tu rajoute cela

<script type="text/javascript">
   var vid = document.getElementById("video");
   var op = document.getElementById("opac");
   var cli = document.getElementById("click_here");
   
   cli.onclick = function(){
    op.style.display = "none";
    cli.style.display = "none";
    vid.src = "https://www.youtube.com/embed/l6ZV0JBa1Tk?autoplay=1";
   }
   
  </script>

tu remarquera que sur cette ligne

vid.src = "https://www.youtube.com/embed/l6ZV0JBa1Tk?autoplay=1";

c'est toujour le lien de la vidéo mais j'ai retiré ?wmode=transparent"

et j'ai mis à la place ?autoplay=1"

bon voilà en gros

bonne chance
¨'°ºO×º°"~'"°º×Oº°'¨Linux est le noyau --*^v^-^v^*-- et Windows les pépins(¯'·o©º°¨¨°©o)·

Réponse 4 / 9

cindyy

Merci :), juste une petite question, car j'ai oublié de préciser que la vidéo provient de mon ordinateur et non de youtube, est-ce que ça marque quand même si je remplace juste le fichier source.

Utilisateur anonyme

oui , je fais juste des modifications dans ce cas là, et je vous donne le bon code

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

Utilisateur anonyme

Salut,

http://trucpourccm.franceserv.com/

donc voila j'ai fais les modifications, c'est plus long à démarrer

balise video : https://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

je l'ai juste mi en ogg, donc si tu n'a pas le bon navigateur tu pourra pas tester

chrome et firefox sa a l'air de passer. De toute façon je te conseille de mettre ta video dans tout les formats.

css qui sera à adapter :

#opac {
				position: absolute;
				background-color: black;
				opacity: 0.8;
				z-index: 100;
				height: 600px;
				width: 100%;
			}
			video {
				z-index: -100;
			}
			#click_here {
				color: white;
				font-size: 2.5em;
				left: 45%;
				top: 240px;
				z-index: 200;
				position: absolute;
			}

html :

<div id="opac"></div>
		<span id="click_here">Tu clique ici</span>
		<video width="100%" height="600" controls="controls" preload="auto" id="video">
			<source src="video.ogg" type="video/ogg" />
			
			texte alternatif si tu peu la voir
		</video>

javascript

<script type="text/javascript">
			var vid = document.getElementById("video");
			var op = document.getElementById("opac");
			var cli = document.getElementById("click_here");

			cli.onclick = function() {
				op.style.display = "none";
				cli.style.display = "none";
				vid.play();
			}

		</script>

bonne chance

Réponse 6 / 9

cindyy

Merci, ça a l'air de marcher, une autre petite question au passage, est-ce que vous savez comment on centre un site dans une page et qui s'adapte à tout les taille d'écran.

Utilisateur anonyme

bonjour, pour le centrer, vous prenez votre bloc qui contient tout le site

#mon-conteneur{
margin: auto;
width: 960px;
}

pour des tailles différente suivant les écran : http://css.mammouthland.net/css3/media-queries.php

Réponse 7 / 9

cindyy

Une dernière question, tout s'affiche comme je veux, le seul problème est que la vidéo ne se lance pas quand je clic sur le lien qui est dessus, ni quand j'appuie sur lecture, est-ce que vous auriez une idée d'ou proviendrait le problème.

Voila mon code si ça peut vous aider :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="mon-conteneur">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="habillage.css" rel="stylesheet" type="text/css" />

<div id="menu">
<ul>
<li><a href="#"><img src="1.png" height="40" /></a></li>
<li><a href="#"><img src="2.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="3.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="4.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="5.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#"><img src="6.png" height="60" /></a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>

</div>

</head>

<body>

<div id="opac"></div>
<span id="click_here"><img src="TITRE.png" width="70%" /></span>
<video width="100%" height="600" controls="controls" preload="auto" id="video">
<source src="file:///Macintosh HD/Users/cindyy/Desktop/animation/ELLE de mavidéo.mp4" type="video/mp4"/>
</video>

javascript

<script type="text/javascript">
var vid = document.getElementById("video");
var op = document.getElementById("opac");
var cli = document.getElementById("click_here");

cli.onclick = function() {
op.style.display = "none";
cli.style.display = "none";
vid.play();
}

</script>

<div id="bottom">
<img src="ysl.jpg" width="100%" /></div>

<script language="javascript">top.resizeTo(window.screen.availWidth,
window.screen.availHeight);</script>

</body>
</div>
</html>

Réponse 8 / 9

Utilisateur anonyme

Bonjour,

la balise <video> c'est de l'html5, vous êtes en xhtml...peut être que....

ensuite au passage :

votre code est catastrophique, et simple à corriger en même temps.

pour me faire plaisir , faite cela :

<!DOCTYPE html>
<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Document sans nom</title>
  <link href="habillage.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
   #click_here img {
    width: 70%;
   }
   video {
    width: 100%;
    height: 600px;
   }
   #bottom img {
    width: 100%;
   }
  </style>
 </head>
 <body>
  <div id="mon-conteneur">
   <div id="menu">
    <ul>
     <li>
      <a href="#"><img src="1.png" alt="" height="40" /></a>
     </li>
     <li>
      <a href="#"><img src="2.png" alt="" height="60" /></a>
      <ul>
       <li>
        <a href="#">Sous-item 1</a>
       </li>
       <li>
        <a href="#">Sous-item 2</a>
       </li>
       <li>
        <a href="#">Sous-item 3</a>
       </li>
      </ul>
     </li>

    </ul>
    <ul>
     <li>
      <a href="#"><img src="3.png" alt="" height="60" /></a>
      <ul>
       <li>
        <a href="#">Sous-item 1</a>
       </li>
       <li>
        <a href="#">Sous-item 2</a>
       </li>
       <li>
        <a href="#">Sous-item 3</a>
       </li>
      </ul>
     </li>
    </ul>

    <ul>
     <li>
      <a href="#"><img src="4.png" alt="" height="60" /></a>
      <ul>
       <li>
        <a href="#">Sous-item 1</a>
       </li>
       <li>
        <a href="#">Sous-item 2</a>
       </li>
       <li>
        <a href="#">Sous-item 3</a>
       </li>
      </ul>
     </li>
    </ul>
    <ul>
     <li>
      <a href="#"><img src="5.png" alt="" height="60" /></a>
      <ul>
       <li>
        <a href="#">Sous-item 1</a>
       </li>
       <li>
        <a href="#">Sous-item 2</a>
       </li>
       <li>
        <a href="#">Sous-item 3</a>
       </li>
      </ul>
     </li>
    </ul>
    <ul>
     <li>
      <a href="#"><img src="6.png" alt="" height="60" /></a>
      <ul>
       <li>
        <a href="#">Sous-item 1</a>
       </li>
       <li>
        <a href="#">Sous-item 2</a>
       </li>
       <li>
        <a href="#">Sous-item 3</a>
       </li>
      </ul>
     </li>
    </ul>
   </div>

   <div id="opac"></div>
   <span id="click_here"><img src="TITRE.png" alt="" /></span>
   <video controls="controls" preload="auto" id="video">
    <source src="file:///Macintosh HD/Users/cindyy/Desktop/animation/ELLE de mavidéo.mp4" type="video/mp4"/>
   </video>

   <div id="bottom">
    <img src="ysl.jpg" alt="" />
   </div>
  </div>
  <script type="text/javascript">
   var vid = document.getElementById("video");
   var op = document.getElementById("opac");
   var cli = document.getElementById("click_here");

   cli.onclick = function() {
    op.style.display = "none";
    cli.style.display = "none";
    vid.play();
   }

  </script>

  <script type="text/javascript">
   top.resizeTo(window.screen.availWidth, window.screen.availHeight);
  </script>

 </body>

</html>

voilà il est a juste une erreur de validation, de toute façon vous n'aurez pas le choix...si vous voulez que cela fonctionne une fois en ligne.

le chemin de la vidéo : file:///Macintosh HD/Users/cindyy/Desktop/animation/ELLE de mavidéo.mp4" type="video/mp4

deux chose me gêne :

- c'est le chemin de votre ordinateur, je me demande pourquoi ne pas mettre la video dans le même dossier que votre site et ensuite juste mettre le nom de la video ?

- il ne faut jamais mettre d'espace dans le nom d'un fichier ou dossier. L'usage de '-' ou de '_' est ce qu'il faut faire.

ensuite faite bien comme je vous ai dit, convertissez votre vidéo aussi au autres formats pour qu'elle puisse être visible de tous.

sinon comme la balise video est de l'html5 j'ai modifié le doctype et je vous invite a utiliser les balises <header> <nav><footer>

j'ai retiré des attributs de taille qui avaient à l'intérieur des balises et je les ai placé dans le head.

ales images doivent avoir alt
¨'°ºO×º°"~'"°º×Oº°'¨Linux est le noyau --*^v^-^v^*-- et Windows les pépins(¯'·o©º°¨¨°©o)·

Réponse 9 / 9

cindyy

Merci beaucoup, en effet ça marche beaucoup mieux.

Votre réponse