initClub · 1ère Communauté Webflow Francophone

Updated last month

Create a video player like the one on fullenrich.com

At a glance
The community member is looking for a tutorial on how to create a video player similar to the one on the website https://fullenrich.com/fr/. Another community member suggests using a lightbox, which is a native way to achieve this by adding an animation on the image and opening a lightbox when the "play" button is clicked. The original poster confirms that this solution works for them.
Useful resources

Hello ! Je lance un Help me ! Je cherche une vidéo tuto pour faire un play vidéo exactement comme sur ce site https://fullenrich.com/fr/ (en scrollant un peu plus bas, on vois l'image product avec un play, et en cliquant dessus, une vidéo se lance, j'aimerai pouvoir faire exactement pareil !) Alors effectivement le site est fait sur Framer, mais j'imagine qu'on faire exactement la même chose sur Weblfow, est ce que vous pouvez m'aider à savoir comment je pourrai faire ? 🙏

Marked as solution

Hello Franck,
Tu as plusieurs façons de faire ça, le moyen “le plus natif” est d’utiliser une lightbox

En soit c’est juste une anim sur l’image et au click sur le bouton play ça ouvre la lightbox

View full solution
B
F
4 comments

Hello Franck,
Tu as plusieurs façons de faire ça, le moyen “le plus natif” est d’utiliser une lightbox

En soit c’est juste une anim sur l’image et au click sur le bouton play ça ouvre la lightbox

Merci beaucoup Benoît ! Je n'avais pas du tout pensé à utiliser le Lightbox. Par contre, j'ai ajouté une image "Play" devant l'image, mais forcément quand je passe le curseur devant, ça ne permet pas de cliquer sur le lightbox pour ouvrir la popup, une idée de comment je peux palier à ce problème ?

Mets le button play en tant qu’image de ta lightbox et donc au click sur cette dernière ça va ouvrir la modale non ?
Ton image avec l’anim est elle indépendante de la lightbox

Ah super merci ! Ca fonctionne, problème résolu ✅

Add a reply
Sign up and join the conversation on Slack