๐ฌ DCT Apps โ Video Player Generator: User Guide
Everything you need to style, embed, and reuse your custom player in Systeme.
Chapters under video
Timer for video or chapter
Control the video branding
๐ Overview
The DCT Video Player Generator builds a branded HTML5 video player for Systeme. You can customize fonts, play button, chapters, a countdown timer, and controls like speed, volume, skip, and fullscreen. The generator also creates a single pasteable code block for your page.
๐ Quick Start
1) Enter video details
- MP4 URL paste your video link
- Thumbnail URL optional poster image
- Player width 100% is recommended
- Start volume set a default level
Tip. Use a 16 by 9 thumbnail for best fit.
2) Pick your look
- Accent color progress and markers
- Play button color separate from timer color
- Timer color separate customization
- Font Poppins by default or choose another
๐จ Styling Options
Play button
- Circle, square, soft square, ring, or hidden
- Optional animation pulse, breath, glow, or ripple
Controls and layout
- Show or hide progress bar
- Show chapter chip at top, in the controls instead of progress, or hide it
- Auto hide controls after 3 seconds, 5 seconds, or 10 seconds of no mouse movement
๐ Chapters
How to add chapters
Use one chapter per line in the format mm:ss - Title.
| Example line | Meaning |
|---|
| 0:00 - Live event invitation | Chapter starts at zero |
| 0:41 - Pricing Changes | Chapter starts at forty one seconds |
| 1:40 - Book a call | Chapter starts at one minute forty seconds |
Display
- Chapters render under the player
- Active chapter is highlighted with your accent color
- You can collapse the list by default
- Chapter text can be white on dark or black on white with a soft shadow
The chapter chip is hidden automatically on phones to save space. Chapters under the video remain available.
โฑ๏ธ Countdown and Playback
Countdown modes
- Video remaining counts down the whole video
- Chapter remaining counts down the current chapter
- Position at the top, in the controls, or hide it
Controls
- Speed toggle 1x to 2x
- Volume popover with vertical slider
- Skip backward and forward by ten seconds
- Fullscreen toggle with mobile orientation hint
๐พ Presets
Save and reuse
- Save the current configuration with a name
- Load any saved preset later
- Delete presets you no longer need
Tip. Presets are saved in your browser only.
Move between devices
- Export a preset to JSON
- Import the JSON on another device or browser
- Also record your configuration in the Google Sheet so your team can reuse it
๐ Generate and Embed
Generate code
- Click Generate Code in the tool
- Click Copy code
- Paste into a Custom HTML block in Systeme
If the live preview looks out of sync click Update Live Preview.
Branding
DCT branding sits at the far right of the controls and links to your DCT video page. Removal is locked and offered as a paid upgrade.
๐๏ธ Save to Google Sheets
Keep your player settings consistent across funnels and launches. Record each configuration in a Google Sheet using the columns below.
Template columns
| Column | Example | Notes |
|---|
| Name of video | Pricing Changes 2025 | Internal reference |
| Video mp4 URL | https://cdn.example.com/video.mp4 | Direct link |
| Thumbnail jpeg URL | https://cdn.example.com/poster.jpg | Optional poster |
| Chapters | 0:00 - Intro\n0:41 - Pricing | One per line |
| URL placed | https://yourdomain.com/offer | Where embedded |
| Final video HTML code | <!-- full code --> | Paste your generated block |
| DCT video player JSON | { ... } | Exported preset for reuse |
Download a starter CSV template and upload it to Google Sheets.
Download template
๐ฑ Test on Live Page and Mobile
Checklist
- Create a hidden or draft page in Systeme and paste the generated code
- Open the live URL outside the editor and verify styles match the preview
- Test on a phone. Play, pause, skip, volume, and fullscreen
- Rotate to landscape to fill the screen
- Confirm chapters under the video are tappable
Troubleshooting
- If presets seem stale, try incognito or clear the app presets
- If colors or chapter styles look wrong on the live page, ensure you copied the entire code block
- Validate your MP4 and thumbnail URLs
โ FAQ
How do I remove DCT branding
Where are my presets stored and how do I reuse them
Presets are stored locally in your current browser. To reuse across devices, export the JSON in the generator and save the same information into the Google Sheet (use the โDCT video player JSONโ column). That way you can copy settings back exactly in the future.
My chapters donโt highlight or scroll to the player
Ensure the chapter times are valid (mm:ss - Title) and that your page copied the full generated code. If needed, enable โSmooth scroll to player after chapter clickโ in the generator and re-generate.
Fullscreen behaves differently on mobile
Mobile browsers control the fullscreen experience. Some require a rotation to landscape for a true full view. The app shows a hint on first use.
๐ Security and Limits
This tool was created with enhanced security in mind so your video link cannot be copied through simple actions like right click.
Using this customized player does not guarantee your video is completely safe from piracy.
There are no limits to how many videos you use with this tool because we do not provide hosting and we do not keep records of your videos.
This tool is a code generator, not a video host, and we do not store your information.
You are ready to publish.
Save your preset, record it in your Google Sheet, then embed and test on a live page and on your phone.
Last updated: Sep 1, 2025