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!!


#2
Posté 01 December 2015 - 14:36 PM
Bonjour,
Pas tout à fait en fait....
Ok
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.
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 ?
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.
Citation
J’espère que j'ai été claire et que vous avez compris mon probleme!
Citation
je travail sur wordpress
Citation
j'ai un widget qui me permet d insérer des video
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
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
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.
Tutoriels AS3 >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions - Raycasting - Plateformes - Mode7 - Starfield - Frogger - Space Invader - Blackjack - Sudoku - Asteroids - Video Poker - Rogue Like (partie 1) - Rogue Like (partie 2) - Mastermind - Rendus 2D - Flixel - Auditorium - Particules - Pacman - Doodle Jump - Course de voiture
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
#3
Posté 01 December 2015 - 16:02 PM
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!!!
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!!!
#4
Posté 01 December 2015 - 16:32 PM
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
Tutoriels AS3 >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions - Raycasting - Plateformes - Mode7 - Starfield - Frogger - Space Invader - Blackjack - Sudoku - Asteroids - Video Poker - Rogue Like (partie 1) - Rogue Like (partie 2) - Mastermind - Rendus 2D - Flixel - Auditorium - Particules - Pacman - Doodle Jump - Course de voiture
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
#5
Posté 01 December 2015 - 21:06 PM
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.
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)
Tutoriels AS3 >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions - Raycasting - Plateformes - Mode7 - Starfield - Frogger - Space Invader - Blackjack - Sudoku - Asteroids - Video Poker - Rogue Like (partie 1) - Rogue Like (partie 2) - Mastermind - Rendus 2D - Flixel - Auditorium - Particules - Pacman - Doodle Jump - Course de voiture
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
#6
Posté 02 December 2015 - 07:48 AM
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!!!
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!!!
#7
Posté 02 December 2015 - 11:44 AM
Bonjour,
Sans voir votre code difficile de vous en dire plus, il faudrait un lien vers votre page pour bien faire.
Sans voir votre code difficile de vous en dire plus, il faudrait un lien vers votre page pour bien faire.
Tutoriels AS3 >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions - Raycasting - Plateformes - Mode7 - Starfield - Frogger - Space Invader - Blackjack - Sudoku - Asteroids - Video Poker - Rogue Like (partie 1) - Rogue Like (partie 2) - Mastermind - Rendus 2D - Flixel - Auditorium - Particules - Pacman - Doodle Jump - Course de voiture
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
Tutoriels Javascript >> Pong - Taquin - Memory - Tic Tac Toe - Pendu - Snake - Proximity - Cascade - Démineur - Bejeweled - Tetris - Collisions -
Jeux perso >> Mes jeux
Répondre à ce sujet

1 utilisateur(s) li(sen)t ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)