6 réponses à ce sujet

[smit]

Bonjour,

je travail sur wordpress et j'ai un widget qui me permet d insérer des video.
Quand la video aparait, j aimerais pour faire la difference avec les article simple mettre sur l'image de la video un petit icon de video qui permet de montrer que c'est une video.

Je suis dessus depuis ce matin et n'arrive pas a le faire.

Est ce que quelqu'un aurez une piste pour moi??

J’espère que j'ai été claire et que vous avez compris mon probleme!

Merci beaucoup!!

[Monsieur Spi]

Bonjour,

Citation

J’espère que j'ai été claire et que vous avez compris mon probleme!

Pas tout à fait en fait....

Citation

je travail sur wordpress

Ok

Citation

j'ai un widget qui me permet d insérer des video

Où et pourquoi un widget ?
Ce qui n'est pas clair ici c'est que pour insérer une vidéo dans un article on a normalement pas besoin d'un widget.
Qui dit widget dit barre latérale ou adaptation perso, du coup il faudrait nous en dire plus sur son utilité et son fonctionnement.

Citation

Quand la video aparait, j aimerais pour faire la difference avec les article simple

Elle doit apparaître où ?
Au sein d'un article, dans une catégorie, en image à la une, en barre latérale ?
Comment intègre-tu tes vidéos ?

Citation

mettre sur l'image de la video un petit icon de video qui permet de montrer que c'est une video

Pour ça un peu de CSS et de Javascript devraient suffire ou alors une petite retouche sur le widget.

Solution 1 : modifier le widget
Si tu as accès au code, édite le fichier PHP qui sert de vue (affiché en front-end), repère la boucle ou la partie qui permet d'intégrer la vidéo, et ajoute y une nouvelle DIV avec une classe du genre "iconvideo" et dans laquelle tu met l'image de ton icone. Dans ton CSS (style.css), tu place cette div (iconvideo) par dessus la vidéo (absolute, top 0, left 0, z-index 1000 en faisant attention que le conteneur soit bien en position relative ou absolue). Enfin il faut rajouter un petit peu de JS en éditant le fichier "html5.js", le but est simplement d'écouter le clic sur l'icone pour le rendre invisible et lancer la vidéo.

Solution 2 : sans modifier le widget
Il faut repérer la balise utilisée par le widget pour intégrer la vidéo (voir le code source généré), puis travailler en javascript et dans l'ordre : ajouter une nouvelle div avec l'icone devant la balise vidéo, puis effectuer les même opération que dans la solution 1.

[smit]

Merci pour votre reponse!

Mon widget permet simplement de m'afficher dans la sidebar une video provenant d'un flux. elle s'affiche très bien et fonctionne parfaitement.
mon probleme viens du faite que je veux inserer un icon au centre pour indiquer que c'est bien une video en ne touchant qu'au css car je n'ai pas réussi a trouver ou été défini le code html (je me demande si il est pas généré automatiquement)

le code html source est le suivant:

<aside class="widget widget_youtube_wpress_widget">
<span class="ywpress-video-item">
<a class="play_youtube iframe" title="Gotta Get a LARD LAD DONUT!!! Universal Studios DAY 4 with the Minions!" href="http://www.youtube.com/embed/u0lP-m_rVYo?autoplay=1">
<img alt="Gotta Get a LARD LAD DONUT!!! Universal Studios DAY 4 with the Minions!" style="width: 340px;" src="https://i.ytimg.com/vi/u0lP-m_rVYo/hqdefault.jpg">
</a>
</span>
</aside>
 

Ne peut on pas avec du css seulement ajouter un icon à l'image??

Merci beaucoup!!!

[Monsieur Spi]

Citation

Ne peut on pas avec du css seulement ajouter un icon à l'image??

Dans ton cas il faut que tu ajoute un élément HTML pour afficher ton icone puis le positionner en CSS par dessus la vidéo.

En réfléchissant deux secondes je vois trois solutions :

1 - Modifier directement le code PHP (qui génère le code HTML) du widget et lui ajouter un élément (ton icone)
Lire : https://openclassroo...eer-des-widgets

2 - Ajouter ton élément (icone) en se servant de Javascript, une fois la page chargée
Lire : https://developer.mo...t/createElement

3 - Utiliser CSS et les pseudo classes :before et :after pour insérer des bouts de codes (pas sur du résultat, pas testé)
Lire : https://developer.mo...Web/CSS/content

[Monsieur Spi]

Re,

J'ai fais un test avec du full CSS et la pseudo classe ":before", ça fonctionne et c'est encore ce qu'il y a de plus simple. On peut facilement ajouter une image devant une balise choisie et lui passer des paramètres, tu as un rapide exemple ci-dessous.

A toi de trouver la balise qu'il faut pour chaque vidéo affichée.
Puis il faudra trouver un moyen masquer l'image et de lancer la vidéo au clic, là tu aura sans doute besoin de Javascript.

Fichier(s) joint(s)

•  iconesurvideo.rar   5 Ko   33 téléchargement(s)

[smit]

Bonjour Monsieur Spi!

Merci pour votre code!
Toute fois c'est incompréhensible mais il ne fonctionne pas dans mon cas! je viens d'y passer encore une heure, je vois le css qui apparaît dans firebug mais qui ne s'affiche pas.

Auriez vous une idée pour moi??

Merci encore!!!

[Monsieur Spi]

Bonjour,

Sans voir votre code difficile de vous en dire plus, il faudrait un lien vers votre page pour bien faire.