Media • v1.0.2

@synqro/player

Replace a custom thumbnail with YouTube, Vimeo, or HTML5 video on click.

Ultra-lightweight facade pattern: no video SDK is loaded until the user clicks. Auto-detects YouTube, Vimeo and direct .mp4/.webm URLs from the attribute value.

Install • Paste in 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
Add the script to your Webflow project. Go to Project Settings → Custom Code → Footer Code and paste the snippet above.
2
Add the custom attributes to the relevant elements in the Webflow designer — see the table below.
3
Publish your site. The script initializes automatically on DOMContentLoaded.

Configuration

Select the element in the Webflow designer and add these custom attributes under the Element Settings panel.

Attribute	Value	Description
Required	`YouTube / Vimeo / .mp4 URL`	Video URL. Auto-detects provider (YouTube, Vimeo, HTML5).
	`true`	Start muted. Required for reliable mobile autoplay.
	`true`	Loop the video.
	`30`	Start time in seconds.
	`true`	Show thumbnail again when video is paused or ended. Click to resume.
	`cc_load_policy=1`	Extra iframe parameters (advanced).

Examples

YouTube with custom thumbnail

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>

Looping muted background video

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>

Restore mode (thumbnail returns on 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 & notes

Aspect ratio — use Webflow's native aspect ratio on the Div Block (16:9 recommended).
Mobile — add sl-player-muted="true" for reliable autoplay on mobile.
Empty CMS fields — if the URL field is empty, the script silently ignores the element.
CSS hook — the class sl-player-active is added to the wrapper while the video is playing.
Video thumbnail — you can use a Webflow background video (or any <video>) as the thumbnail instead of an image. It's paused and hidden when the real player starts, and resumed in restore mode.