triangle de video

Salut,

Quel est ton plugin ? As-tu chercher sur la page du plugin ?
Si ce n'est pas prévu, ce qui m'étonnerais, tu peux réaliser tout ça en css et js.

c'est un widget tout simple qui ne le propose pas! je me suis dit qu'en touchant un peu au code je pourrais peut être le faire moi même, mais la je n'y arrive pas du tout!!

Voila une piste ^^
http://codepen.io/MrCastor/pen/MaNRPz

Merci beaucoup!!
Je n'ai pas reussi à exploiter le code que vous m'avez fait parvenir!
mon code se presente ainsi:

<aside class="widget widget_youtube_wpress_widget">around   <span class="ywpress-video-item">around     <a class="play_youtube iframe" title="Patriots vs. Broncos | Week 12 Highlights | NFL" href="http://www.youtube.com/embed/w3XHYPR4km4?autoplay=1">around        <img alt="Patriots vs. Broncos | Week 12 Highlights | NFL" style="width: 340px;" src="https://i.ytimg.com/vi/w3XHYPR4km4/hqdefault.jpg">around      </a>around      </span>around    </aside>

Ce qu'il faudrait faire je pense, c'est ajouter sur l'image de la video un icon de video. j'ai l'impression qu'on peut le faire en CSS mais je n'y arrive pas!!!

<aside class="widget widget_youtube_wpress_widget">
    <span class="ywpress-video-item">
        <a class="play_youtube iframe" title="Patriots vs. Broncos | Week 12 Highlights | NFL"          href="http://www.youtube.com/embed/w3XHYPR4km4?autoplay=1">
        <img alt="Patriots vs. Broncos | Week 12 Highlights | NFL" style="width: 340px;" src="https://i.ytimg.com/vi/w3XHYPR4km4/hqdefault.jpg">
        </a>
    </span>
</aside>

PLUS CLAIRE COMME CA!

Bonjour,

Comme ce que t'as proposé strong>@MrCastor</strong il faut que tu rajoutes un élément HTML dans ton <aside> soit en modifiant directement l'HTML généré par le plug-in, soit en faisant un rajout avec du JS.
Pourrais tu nous dire quel plug-in tu utilises ou mieux, ce que tu ne sais pas faire, que nous puissions aiguiller tes recherches ? :)

c'est gentille!!!

j'utilise le widget you tube WPress, qui affiche mes video à plusieurs endroit du site. Ce que je n'arrive pas à faire me semble simple au vu de tout ce que l'on peut faire en CSS!
J'ai une image video.jpg qui contien un icon de video et que je voudrais mettre sur mes video quand elle aparaissent à l'ecran (ce qui permettra de les differencier des articles) .

j'ai essayer en faisant

.ywpress-video-item {
content: url('video.jpg')
}

mais ca ne fonctionne pas!!

J'attend vos reponses!

Merci beaucoup!!!!!!!

La propriété CSS content ne peut être utilisé qu'avec les pseudo-éléments :after et :before, c'est normal que tu n'aies pas d'affichage.
Essaye plutôt quelque chose du genre :

.ywpress-video-item:after {
    content: '';
    height: X px;
    width: X px;
    background: url( 'video.jpg' );
}

En remplaçant le X par les dimensions de ton image ^^

Non.... l'image n'aparait toujours pas! je ne sais plus quoi faire! inserer une image sur image ne doit quand meme pas être sorcier!!!

Oups, j'ai oublié le display : block !

incompréhensible mais ça ne fonctionne pas!! quelqu'un aurait une idée pour moi??

Je suis perdue.....!!!!!!

Merci beaucoup!!!

J'ai corrigé mon codepen avec ton code : clique ici
Il faut bien entendu remplacer le "ton image ici" par l'url de ton image. url(images/video.jpg) par exemple.
Par contre, à l'avenir, cherche un peu par toi même. Si tu te lance dans la conception d'un site, il faut connaître les bases de l'intégration. Je te conseille donc d'aller te former un minimum sur le html / css et même le js.
Bon courage :)

13 Posts
Bonjour,

Je reviens vers vous après mon problème d'affichage du triangle de démarrage de ma vidéo.

Merci à tout ceux qui m'ont donné des pistes et solutions, toutes fois aucunes n'a fonctionné, et je pense que le problème viens d'une tout autre source.

J'avais commencé par modifier le CSS, mais bizarrement il n'avait aucun impacte sur mon code, je ne voyait même pas les modifications apparaitre dans le css avec Firebug.
J'ai donc en suite décidé de modifier le plugin directement, et la c'est la même choses mes modifications n’apparaissent pas du tout dans le code.

Plus compliqué que ça, je viens de remarquer que les éléments de mon CSS que j'avais ajouté, et que j'ai supprimé depuis (voyant qu'ils ne servaient à rien) apparaissent maintenant quand j'inspecte mon image avec Firebug alors qu'ils ont été supprimé depuis bien longtemps de ma feuille de style.

Je n'y comprend rien...???

Auriez vous une idée de la source de mon problème?

Je ne sais même pas ou chercher et ne trouve pas de sujets similaires sur le web ...

Merci d'avance pour vos reponses que j'attend avec impatience!!!!!!!

Ne modifie jamais le code d'un plugin ! Il suffit d'une mise à jour pour tout perdre.
Pour ton problème, je pense que tu dois avoir un cache d'installer sur ton site. Regarde du côté de tes plugins.
As-tu installer un wordpress sur ton serveur ou travaille-tu avec un blog tout fait de wordpress ?
Pour le css, le lien que je t'ai fournis fonctionne très bien, essaie d'analyser le code pour le comprendre.

Oui effectivement c'est ce qu'on m'a toujours dis, mais voyant que le css ne fonctionnait pas c'etait ma seul alternative...
Je comprend le css, qui fonctionne d'ailleur très bien sur des essais en interne, mais qui n'a aucun impacte sur les images de mon site.
je n'ai aucun cache sur le site et j ai vider le cache du navigateur plusieurs fois.

Aurais-tu le lien de ton site ?
Ca sera plus simple ^^

http://www.spouf.com/ il s'agit des 2 videos à droite et à gauche de la pub qui est au centre.

Pour le css, ça fonctionne sans soucis

span {
  display: block;
  width: 340px;
  height: 255px;
}
span a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
span a:after {
  content: 'ton image ici'; /* mets ici l'url de ton image*/
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Charge le dans ton css et attends qu'il se charge correctement sur ton serveur. Tu as peut-être un varnish ou autre qui empêche la maj de ton site. Dans tous les cas, laisse le fichier et retente l'experience quelques heures plus tard

Tout à fais, ce code fonctionne parfaitement si je le tape directement dans mon firebug ou autre mais n'aparait pas quand je le met dans ma feuille de style????????

c'est quoi un varnish?

Salut,

Varnish, c'est un système de cache.
Est tu sûr de travailler sur la bonne version de ta feuille de styles ? (à ce niveau, toutes les infos sont bonnes à prendre...)

Bonjour à tous!

Juste vous remercier pour votre precieuse aide!
Tout fonctionne maintenant à la perfection!

Très bonne journée et bon courage à tous!

Quelle était la solution finalement ?