Appearance
Display & Embed Overview
Once you have created your video in FluentPlayer, you need to display it on your website. There are several simple ways to embed your player, depending on your workflow and where you want the video to appear.
Which Method Should I Use?
| Method | Best for | Difficulty |
|---|---|---|
| Shortcode | Any post, page, or widget. Works with both Classic and Block editors. | Beginner |
| Gutenberg Block | Block editor users who prefer a visual, drag and drop workflow. | Beginner |
| Elementor Widget | Elementor page builder users drag the FluentPlayer widget into any section. | Beginner |
| Divi 5 Module | Divi 5 builder users add the FluentPlayer module to any row or section. | Beginner |
| Lightbox Embed (Pro) | A button or thumbnail that opens the video in a popup, keeping the page clean. | Beginner |
| Dedicated Player URL | Sharing a direct link to the video (in emails, social media, etc.). | Beginner |
| Timestamp Links | Creating "chapter" links that jump to a specific moment in the video. | Intermediate |
Most users will use the shortcode, the Gutenberg block, or their page builder's native widget or module. All options produce the same result on the front end the choice comes down to which tool you build pages with.
Using another page builder?
Elementor and Divi 5 have dedicated FluentPlayer widgets. Other builders — including Breakdance — work through the shortcode: add a Shortcode element containing [fluentplayer id="42"] and the player renders live on the builder canvas. See Shortcode Embed.
Quick Examples
Shortcode (works everywhere):
[fluentplayer id="42"]1
Block (Gutenberg): Add a "FluentPlayer" block and select media #42.
Playlist shortcode (Pro):
[fluentplaylist id="10"]1
Timestamp link (seek to 1:30):
[fluentplayer_timestamp time="1:30" media_id="42"]Jump to 1:30[/fluentplayer_timestamp]1
Lightbox trigger (Pro):
[fluentplayer_modal id="42" text="Watch the demo"]1
How Embedding Works
When you use a shortcode or block, FluentPlayer handles the technical work behind the scenes:
- Detection: WordPress identifies the
[fluentplayer id="42"]tag in your content. - Fetching Data: The plugin pulls the specific settings for that ID, such as the video source, player preset, and any overlays.
- Rendering: The plugin generates the necessary HTML and inserts the player into your page for the viewer. The viewer sees a fully working player.
INFO
Your video source URL is not hardcoded into the shortcode. Because the shortcode uses the Media ID, you can change the video file or source in the FluentPlayer dashboard, and it will automatically update everywhere the video is embedded. Advanced users can go further and have the source replaced dynamically per page from post meta — see Dynamic media source.