Un spoiler spécial

Logiciel & apps Programmation
1

Bonsoir,

J’aimerais avoir un code html qui me permettrait de cacher une vidéo (j’utiliserais une image pour cacher la vidéo), et lors d’un clic sur l’image qui cache la vidéo, alors ça chargerait la vidéo.

En ce moment, j’ai 10 vidéos par page et le chargement de la page est assez long, cela aurait pour effet de diminuer ce temps de chargement.

J’ai essayer d’utiliser le spoiler, seulement il y a un problème: l’image qui sert a caché la vidéo ne disparait pas, c’est pas génial esthétiquement donc j’aurais aimé une autre solution de spoiler où ce qui cache disparait pour laisser la place a ce qui était caché.

Le problème c’est que je n’ai rien trouvé de tel sur le net alors je vous expose mon problème en espérant que vous ayez une solution qui puisse me permettre de réaliser ceci que ce soit par un spoiler ou autre chose.

Je vous remercie de l’attention que vous consacrerais a ma demande.

2

personne ne connait un truc pour résoudre mon problème?

3

Ce que tu as testé devrait en principe faire l’affaire, y a plus qu’à bien faire disparaître l’image.

File voir ton code qui fait ça…

4

j’ai ceci par exemple, mais faudrait que le bouton disparaisse totalement une fois afficher alors que la il reste

<div style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = ''; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

il y a ca aussi dans le même genre, si l image disparaissait après le clic ca ce serait mieux

<a href="javascript:;" onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');"><img src="http://i69.servimg.com/u/f69/12/59/88/86/sans_t10.png"/></a><span style="display: none;"> texte masqué</span>

j’ai ceci aussi mais l image reste et ca a l air de déconner parce qu un coup sur 2 il s ouvre tout seul

<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')" style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic"><img src="http://i69.servimg.com/u/f69/12/59/88/86/sans_t10.png"/></b><br><br><div class="Topic masque" id="spoiler2"><p>texte masqué

j’ai encore trouvé ceci mais je ne pense pas que ça puisse résoudre mon problème

<dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><dt>[b]instructions: cliquez sur moi[/b]</dt><dd><div style="display: none;">faire ceci, faire cela
tout une liste à faire
et plus encore

pour refermer cliquez sur moi</div></dd></dl>

et ceci

<dl class="codebox" style="cursor: pointer;" onclick="this.getElementsByTagName('div')[0].style.display=((this.getElementsByTagName('div')[0].style.display=='none')?'':'none');"><dt><table border="0"><tbody><tr><p style="border: 12px ridge rgb(0, 102, 204); padding: 2px; width: 130px;">Ouvrir le règlement</p></tr></tbody></table></dt><dd><div style="display: none;">faire ceci, faire cela
tout une liste à faire
et plus encore
<table border="0"><tbody><tr><p style="border: 12px ridge rgb(0, 102, 204); padding: 2px; width: 130px;">Fermer le règlement</p></tr></tbody></table></div></dd></dl>

voila, je ne vois pas comment faire pour arriver a mes fins avec ca alors si quelqu’un a une idée ça m’interesse