Video Player by bPlugins Video Player by bPlugins — App Blocks Guide
This guide explains every theme block the Video Player by bPlugins app adds to
your Shopify theme, what each one does, and how to set it up. No coding required —
everything is added and configured from the Shopify Theme Editor
(Online Store → Themes → Customize).
Before you start: turn on the App Embed
The app ships one App Embed plus three Section Blocks. The App Embed is the
engine — it loads the video player library, applies your saved player settings, and
records analytics. None of the video blocks will display until the App Embed is
turned on.
How to enable it
- In the Theme Editor, click the App embeds icon (the puzzle/plug icon in the
left sidebar). - Find Video Player by bPlugins in the list.
- Toggle it On.
- Click Save.
You only need to do this once per theme.
Block overview
| Block name (in Theme Editor) | Type | What it’s for |
|---|---|---|
| Video Player by bPlugins | App embed | Required engine. Loads the player + analytics. Enable once. |
| Video Embed: Single Video | Section block | Place one configured video anywhere by its Video ID. Includes a full-screen Hero Section mode. |
| Product Video New | Section block | Automatically shows the video you assigned to a product from the app. |
| Product Video Old | Section block | Legacy standalone player configured entirely inside the Theme Editor. |
Tip: “New” vs “Old” Product Video — use Product Video New for new setups. It
is centrally managed from the app’s Product Video page, so you can update a
product’s video without touching the theme. Product Video Old is kept for
backward compatibility with stores that configured videos directly in the theme.
1. Video Player by bPlugins (App Embed)
The required engine. This is not something you place on the page — it runs in the
background across your whole storefront.
What it does:
- Loads the video player and its styles.
- Finds every video block on the page and turns it into a real, styled player using
the settings you saved in the app (controls, brand color, overlay, watermark,
password protection, single or multi-video layouts, etc.). - Records play counts and watch time so your in-app Analytics page stays
accurate. A privacy-friendly visitor ID is used so the same viewer isn’t counted
twice — it does not track personal data and is not affected by a VPN.
Setup: Just toggle it On under App embeds (see Before you start above).
There are no other settings.
2. Video Embed: Single Video
Use this to drop a single, fully-styled video into any section of any page (home page,
landing page, a custom page, etc.).
How to add it
- In the Theme Editor, open the page where you want the video.
- Click Add section (or Add block) and choose Video Embed: Single Video.
- In the block settings, paste the Video Id of the video you want to show.
Where do I get the Video Id? Open the Video Player by bPlugins app, add or open
a video in your player list / edit screen, and copy its ID. The video’s appearance
(controls, colors, overlay, watermark, etc.) comes from how you configured it in the
app — so you change the look there, not in the theme.
Settings
| Setting | What it does |
|---|---|
| Video Id | The ID of the video to display. Copy it from the app’s player list or edit screen. |
Hero Section mode 🟢
This block can also turn your video into a full-width, full-height hero banner — a
background video that fills the screen with a headline, text, and a button on top.
Great for the top of a home page or landing page.
Turn on “Enable as Hero Section” to reveal these options:
| Setting | What it does |
|---|---|
| Enable as Hero Section | Switches the block into full-screen background-video mode. |
| Enable Overlay Content | Shows/hides the title, body text, and button on top of the video. |
| Hero Title | The large headline text. |
| Hero Body | Rich-text paragraph below the title. |
| Button Text | Label for the call-to-action button (leave blank to hide the button). |
| Button Link | Where the button sends visitors. |
| Section Height | Overall height of the hero area (300–1000 px). |
| Text Alignment | Left, Center, or Right. |
| Text Color | Color of the title and body text. |
| Button Background | Background color of the button. |
| Button Text Color | Text color of the button. |
| Overlay Opacity | Darkens the video behind the text for readability (0 = none, 1 = black). |
| Title Font Size | 16–80 px. |
| Body Font Size | 12–40 px. |
Notes about Hero mode
- The background video is automatically muted and looped, and tries to autoplay —
this is required by browsers for background video and keeps the banner silent. - Player controls are hidden in hero mode so the video stays in the background.
3. Product Video New
The easiest way to show product videos. You assign a video (or several) to a product
inside the app, and this block automatically displays it on that product’s page —
no per-product theme editing.
How it works
- Open the Video Player by bPlugins app → Product Video.
- Assign one or more videos to a product.
- In the Theme Editor, open your Product page template, Add block, and choose
Product Video New.
That’s it. The block reads the product’s assigned video automatically. If the product
has multiple videos assigned, they’re all shown, stacked neatly. To change which video
appears, just update the assignment in the app — the theme doesn’t need to change.
If no video is assigned yet, the block shows nothing on the live store. While editing
in the Theme Editor you’ll see a reminder telling you to assign a video in the app.
Settings
| Setting | What it does |
|---|---|
| Max width | Maximum width of the video area (200–1200 px). Centered on the page. |
| Gap between videos | Spacing between videos when a product has more than one (0–80 px). |
4. Product Video Old (legacy)
A self-contained player you configure entirely in the Theme Editor. Unlike Product
Video New, every option lives in the theme — useful for stores that set videos up this
way before the app-managed workflow existed.
How to add it: Open the Product page template, Add block, choose Product
Video Old, then upload a video or paste a video URL and adjust the options below.
Basic settings
| Setting | What it does |
|---|---|
| Video | Upload/select a video file from Shopify. |
| Video url (if Video don’t exist) | Fallback YouTube or Vimeo link if no uploaded file is set. |
| Poster | Thumbnail image shown before the video plays. |
| Repeat | Loop the video continuously. |
| Auto Play | Start playing automatically (browsers usually require the video to be muted for this to work). |
| Muted | Start with sound off. |
| Reset On End | Return to the poster/start when the video finishes. |
| Auto Hide Controls | Hide the control bar while playing. |
Controls
Toggle which buttons appear on the player:
| Control | Default |
|---|---|
| Play Large (big center play button) | On |
| Restart | Off |
| Rewind | Off |
| Play (play/pause) | On |
| Fast Forward | Off |
| Progress (seek bar) | On |
| Current Time | On |
| Duration | Off |
| Mute | On |
| Volume | On |
| PIP (picture-in-picture, Safari) | Off |
| Airplay (Safari) | Off |
| Settings (quality/speed menu) | Off |
| Download | Off |
| Fullscreen | On |
Styles
| Setting | What it does |
|---|---|
| Brand Color | Accent color for the player (progress bar, buttons). Default #00b3ff. |
| Width | Player width as a percentage of its container (0–100%). |
| Border Radius | Rounds the player’s corners (0–100 px). |
Premium features (set in the app)
These are applied through the App Embed based on how you configure a video in the
app, and appear on Video Embed: Single Video and Product Video New:
- Overlay — a clickable text or logo badge in a corner of the video.
- Watermark — your store domain or custom text that moves around the video to
discourage screen recording. - Password protection — viewers must enter a password before the video plays.
- Multi-video layouts — show several videos as a grid, carousel, or slider with
navigation arrows and dots. - Per-device controls & sizing — different control sets and dimensions for desktop,
tablet, and mobile.
You manage all of these on the video’s edit screen inside the app — no theme changes
needed.
Troubleshooting
| Problem | Fix |
|---|---|
| Video block shows nothing on the live store | Make sure the Video Player by bPlugins App Embed is toggled On and saved. |
| “Video Embed: Single Video” is blank | Confirm the Video Id is correct and the video still exists in the app. |
| “Product Video New” is empty | Assign a video to that product in the app’s Product Video page. |
| Autoplay doesn’t start | Browsers block autoplay with sound. Enable Muted along with Auto Play. |
| Some premium features (overlay, watermark, password) aren’t showing | These require a paid plan and must be enabled on the video in the app. |
App: Video Player by bPlugins ·