Media • v1.0.2

@synqro/player

Remplace un thumbnail custom par un player YouTube, Vimeo ou HTML5 au clic.

Facade pattern ultra-léger : aucun SDK vidéo n'est chargé tant que l'utilisateur n'a pas cliqué. Auto-détecte YouTube, Vimeo et les URLs .mp4/.webm directes depuis la valeur de l'attribut.

Install • À coller dans Project Settings → Custom Code → Footer

HTML

<!-- [Synqro Labs] Player -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/player@1/dist/index.min.js"></script>

Installation

1
Ajoute le script à ton projet Webflow. Va dans Project Settings → Custom Code → Footer Code et colle le snippet ci-dessus.
2
Ajoute les custom attributes sur les éléments concernés dans le Designer Webflow — voir le tableau ci-dessous.
3
Publie ton site. Le script s'initialise automatiquement au DOMContentLoaded.

Configuration

Sélectionne l'élément dans le Designer Webflow et ajoute ces custom attributes dans le panneau Element Settings.

Attribute	Value	Description
Required	`YouTube / Vimeo / .mp4 URL`	URL de la vidéo. Auto-détecte le provider (YouTube, Vimeo, HTML5).
	`true`	Démarre en muet. Nécessaire pour un autoplay fiable sur mobile.
	`true`	Boucle la vidéo.
	`30`	Temps de départ en secondes.
	`true`	Réaffiche le thumbnail quand la vidéo est mise en pause ou terminée. Un clic relance la lecture.
	`cc_load_policy=1`	Paramètres iframe supplémentaires (avancé).

Exemples

YouTube avec thumbnail custom

HTML

<div sl-player="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
    <img src="my-thumbnail.jpg" alt="Video preview" />
    <div class="play-button">▶</div>
</div>

Vidéo de fond en muet et en boucle

HTML

<div
    sl-player="https://example.com/video.mp4"
    sl-player-muted="true"
    sl-player-loop="true"
>
    <img src="thumbnail.jpg" />
    <div class="play-btn">Play</div>
</div>

Mode restore (le thumbnail revient à la pause)

HTML

<div
    sl-player="https://youtube.com/watch?v=dQw4w9WgXcQ"
    sl-player-restore="true"
>
    <img src="thumbnail.jpg" />
    <div class="play-btn">Play</div>
</div>

Tips

Aspect ratio — utilise le ratio natif de Webflow sur la Div Block (16:9 recommandé).
Mobile — ajoute sl-player-muted="true" pour un autoplay fiable sur mobile.
Champs CMS vides — si le champ URL est vide, le script ignore silencieusement l'élément.
Hook CSS — la classe sl-player-active est ajoutée au wrapper pendant la lecture.
Miniature vidéo — tu peux utiliser un background video Webflow (ou n'importe quel <video>) comme miniature à la place d'une image. Il est mis en pause et masqué au démarrage du vrai player, et relancé en mode restore.