Bien entendu, je sais que ça ne vaut pas l'hébergement de ses propres vidéos, mais c'est quand même bien utile pour les gens qui utilisent youtube sur leur site.
Pour en voir un exemple, rendez vous à cette adresse (profitez en également pour regarder la vidéo si vous ne connaissez pas, ça vaut le coup
): http://www.video2teck.com/video-185-Fainting-goats-en-videoL'idée est toute bête: éviter de perdre les visiteurs qui double cliquent partout et donc qui sont redirigés vers youtube.
Là où pour un player dailymotion classique il suffit d'ajouter un simple paramètre au embed, il va falloir ruser sur le CSS avec Youtube.
Voici comment procéder:
Ci dessous, voici la source HTML de mon player youtube.
- Code: Select all
<div class="ConteneurDeCalques">
<div class="CalqueSuperieur"></div>
<div class="CalqueInferieur"></div>
</div>
<object width="400" height="329"><param name="movie" value="http://www.youtube.com/v/we9_CdNPuJg"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/we9_CdNPuJg&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="400" height="329"></embed></object>
Et voici le CSS associé:
- Code: Select all
.ConteneurDeCalques {
position:relative;
width:300px;
height:1px;
}
.CalqueSuperieur {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
top:0px;
left:0px;
width:400px;
height:305px;
background-color:#FF0000;
z-index:3;
}
.CalqueInferieur {
position:absolute;
top:305px;
left:330px;
width:70px;
height:25px;
background-color:#CCCCCC;
background-image:url(images/barreyoutube.jpg);
background-repeat:repeat-x;
z-index:3;
}
Ce qui donne ceci:
beeeeh.JPG
Le contour de la div conteneur en violet, la div supérieure en bleu et la div inférieure en rouge.
En gros, en attribuant un z-index:3 à nos div, elles viennent se positionner comme des grandes au dessus du reste. Ensuite en indiquant leur position respective en absolute, on choisit là ou elle vont être et quelle partie du player elles vont recouvrire. Il faut ensuite leur attribuer une couleur de fond et également indiquer qu'elles vont être transparentes. (ma div inférieure ne l'est pas car je veut recouvrir le bouton de menu avec une image pour le rendre invisible).
Notez que dans mon cas je recouvre entièrement la vidéo et le bouton de menu en plus.
il est bien entendu possible de placer autant de div que l'on veut pour recouvrir certaines zones et pas d'autres. J'ai pour ma part choisis de recouvrir le gros bouton lecture au milieu de la vidéo, mais il est possible de simplement l'encadrer de DIV afin que seulement cette partie de la vidéo soit cliquable.
Voilà tout.
