Afficher vidéo dans faux pop-up

Action scolaire !

Sujet résolu

6 avril 2009 à 11:34:27

Bonjour,

Je suis en seconde et ma professeur de français a inscrit ma classe a participer à un concours de l'ONISEP A vos blogs. Le but était de visiter deux entreprises qui est spécialiste de l'informatique et la deuxième qui utilise de l'informatique.

Ensuite nous avons du rédiger des articles (comme un vrai blog) et grâce au Site du ZérO j'ai pu m'occuper de la partie technique, structure du blog. (toute ma classe était émerveiller par mes connaissance

Mais j'ai un petit soucis, nous avons réalisé une vidéo (qui est sur YouTube) et je voudrais faire que lorsqu'on clique sur un lien ou autre ..., sa ouvre la vidéo soit dans un faux pop-up ou tout simplement la vidéo et le blog devient transparent.

J'ai fait de recherche mais aucuns résultats !

Je sais qu'il faut du javascript mais je ne trouve pas les bonnes fonctions.

Est ce que vous pouvez m'aider ?

Merci
Cordialement _dark mort_

Golmote

6 avril 2009 à 11:53:30

Il existe des "boxes" efficace pour afficher des médias de manière esthétique.

Après, si c'est juste pour une vidéo... ça craint un peu... mais si tu as des photos aussi, etc. ça peut commencer à devenir intéressant.

(Je t'ai sélectionné les plus légères que j'aie pu trouver)
Regarde par exemple...

Multibox
Mediabox Advanced (peut-être un peu plus compliquée)
Milkbox

(Pour infos, les 3 boxes utilisent Mootools.)

Et puis pour en trouver d'autres, regarde ce superbe listing des lightbox-clones, avec filtrage par possibilités. (Toi il t'en faut une qui puisse afficher du Flash)
http://planetozh.com/projects/lightbox-clones/

Morg@n

6 avril 2009 à 13:08:29

Merci pour tes liens, mais je ne comprends rien ... je ne connais rien en javascript.

Est ce que vous avez plus simple (des sites en fr ?)

Ou encore mieux, les codes

Cordialement _dark mort_

birdy42

6 avril 2009 à 13:13:22

Traducteur google... :lol:

J'ai bien aimé tes liens Golmote, si un jour je fais un site... je garde ça

(en espérant que les liens soient pas morts d'ici là)

Golmote

6 avril 2009 à 15:10:54

... Vive l'anglophobie... >_<

Alors, tu télécharges ça

Tu dézippes, et tu récupères les fichiers importants, à savoir :

css/milkbox/milkbox.css
js/mootools-1.2.1-core-yc.js
js/mootools-1.2-more.js
js/milkbox.js

Tu les places dans des dossiers de ton choix, et tu les insères dans ta page grâce aux codes usuels (ici avec le chemin du dossier de départ ) :

<style type="text/css">
	@import url(css/milkbox/milkbox.css);
</style>
<script type="text/javascript" src="js/mootools-1.2.1-core-yc.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/milkbox.js"></script>

Pour le CSS, il faut aussi que tu récupères les images utilisées, et que tu t'assures qu'elles sont bien dans les dossiers définis dans le fichier CSS.

IMPORTANT : Il faut que tu aies une déclaration de DOCTYPE XHTML tout en haut de ta page (strict ou transitionnal) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Et enfin, tu mets le lien vers ta vidéo de youtube (le lien vers le .swf !) de la façon suivante :

<a href="url_de_la_video.swf?avec_des_parametres_pour_youtube_je_crois" rel="milkbox" rev="width:600,height:200" title="Titre de la vidéo">Texte du lien</a>

Et normalement ça devrait fonctionner

Morg@n

6 avril 2009 à 16:44:27

Merci pour ta réponse complète.

J'ai tous réussi, même a ouvrir le "pop-up", mais la vidéo ne s'affiche pas ...

Par exemple, j'ai ce lien : http://www.youtube.com/watch?v=zy3D_PQ3znA

Sur le code je dois mettre

<a href="http://www.youtube.com/watch.swf?v=zy3D_PQ3znA" ... </a>

Merci
Cordialement _dark mort_

Golmote

6 avril 2009 à 17:02:05

Non, c'est pour ça que j'ai précisé "le fichier swf"

Youtube te propose normalement un lien pour insérer la vidéo sur un site. Dans ton cas tu as ça :

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/zy3D_PQ3znA&hl=fr&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/zy3D_PQ3znA&hl=fr&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

Je crois qu'il faut que tu récupères simplement le src de <embed>.

C'est à dire au final :

<a href="http://www.youtube.com/v/zy3D_PQ3znA&hl=fr&fs=1" ...></a>

Morg@n

6 avril 2009 à 17:05:35

Enfaite j'avais aussi pensé a cela, mais je ne voyais le .swf donc je me suis dit que ce n'est pas sa.

La vidéo s'affiche, mais en plein écran. Donc je dois faire quelques modifications, et je vous dit si sa marche ou pas.

Merci

Cordialement _dark mort_

Golmote

6 avril 2009 à 17:33:41

Bah normalement tu peux régler les dimensions dans l'attribut rev du lien...

Et sinon, dernier recours, quand tu entre l'url dans la barre d'adresse, c'est en fait une redirection...
Tu pourrais essayer en mettant l'url redirigée... c'est à dire dans le cas présent :

<a href="http://www.youtube.com/swf/l.swf?swf=http%3A//s.ytimg.com/yt/swf/cps-vfl87635.swf&video_id=zy3D_PQ3znA&rel=1&eurl=&iurl=http%3A//i3.ytimg.com/vi/zy3D_PQ3znA/hqdefault.jpg&sk=_alxVP2YNQ95DtZbWGP_MVTti1o8keiSC&fs=1&hl=fr&cr=US&avg_rating=4.96590909091&length_seconds=111&allow_ratings=1&title=Me%20again%20Playing%20%22keyboards%22" ...></a>

Morg@n

6 avril 2009 à 19:42:37

Sa marcheeeeeeeeeeee ......

Merci pour votre aide ! J'ai un meilleur résultat que je n'espérais

Juste un soucis ... sur Internet Explorer la vidéo ne s'affiche pas. Pas grave, je demanderais qu'il installe mozilla sur le PC.

Merci pour tous

Cordialement _dark mort_