Creating an embedded player

Embedded players let you add a ReelCrafter audio player to your website. Visitors can browse and play your tracks without leaving your site, and you get play count analytics on your Dashboard.

Available on Starter and Professional plans.

Jump to: Before you start · Creating an embedded player · Customizing your player · Adding to your website · Website compatibility · Updating your player · Viewing analytics · Deleting a player · Common questions

Before you start

Embedded players have a few requirements:

  • Published reel: Your reel must be published at least once before you can create an embedded player
  • Audio content: Your reel needs at least one audio track in the first Media block
  • First Media block only: Only audio from the first Media block appears in the embedded player

Embedded players are audio-only. Videos, images, text blocks, and other reel content don't appear in the embed.

Creating an embedded player

To create an embedded player:

  1. Open a reel from your Reel library
  2. Scroll down and click the Embedded Player tab
  3. Customize your colors and player options (see below)
  4. Click Create and publish
  5. Copy the generated embed code

Customizing your player

Colors

Set three colors for your embedded player:

  • Background color: The player's background
  • Text color: Track titles and other text
  • Primary color: Play button, progress bar, and interactive elements

Click any color swatch to open the picker. You can select a color visually, use the hue slider, or enter a hex code directly. Click the + icon to save colors to your swatch library for reuse.

Use the Copy colors button to import colors from:

  • The default ReelCrafter palette
  • Your reel's current theme

Player options

  • Display album art: Show album artwork for each track. If some tracks don't have artwork, you'll see a warning with the count of tracks that will show a placeholder image.
  • Hide track notes: Remove public track notes from the player
  • Hide ReelCrafter logo: Remove ReelCrafter branding from the player (Professional plan only)

Height

Set the player height in pixels. The default is 400px. If your player is shorter than your playlist, it becomes scrollable. The player auto-advances through tracks as they play.

Preview

The preview on the right updates as you make changes, so you can see exactly how your player will look before publishing.

Adding to your website

After clicking Create and publish, you'll see an embed code in the Embed Code section. Click Copy Code to Clipboard and paste it into your website's HTML.

The embed code looks like this:

Most website platforms have a way to add custom HTML or embed codes. Look for options like "Custom HTML block," "Embed block," "Code block," or "HTML widget" in your site editor.

Important: ReelCrafter does not provide technical support for adding embed code to your website. If you need help with placement, styling, or troubleshooting on your site, please contact your web designer or your platform's support team.

Website compatibility

ReelCrafter embedded players work on any website that supports iframes. This includes most website builders, content management systems, and custom-built sites.

Platforms that support embedded players

These platforms allow iframes and work with ReelCrafter embeds:

WordPress.com restrictions

WordPress.com (the hosted service, not self-hosted WordPress.org) restricts iframe usage on lower-tier plans. ReelCrafter embedded players only work on the Creator plan or higher. Free, Starter, and Explorer plans do not allow iframes.

If you have a WordPress site and aren't sure which type you have:

  • WordPress.org: Self-hosted on your own server or a third-party host (like Bluehost, SiteGround, etc.). Iframes work with no restrictions.
  • WordPress.com: Hosted by WordPress.com. Requires Creator plan ($25/month) or higher for iframes to work.

For WordPress.org sites, you can add embed code using the Custom HTML block in the editor. Some users prefer using an iframe plugin for more control over placement.

Updating your player

Track changes

When you edit tracks in your reel (adding, removing, renaming, or reordering), those changes appear in your embedded player automatically after you publish the reel. No need to update any code on your website.

Color and option changes

To update colors or player options, make your changes in the Embedded Player tab and click Update and publish. Changes go live immediately.

Height changes

If you change the player height, click Update and publish to regenerate the code, then replace the old code on your website with the new code. Height is set in the iframe itself, so this is the only change that requires updating your website code.

Viewing analytics

Embedded players track play events. You can view this data on your Dashboard in the Embedded Player Activity section.

The chart shows play counts by reel over your selected date range. Click into a reel for a detailed breakdown of activity.

To reset your embed statistics, use the reset options in the Dashboard to delete events for a specific date range or all events.

Deleting a player

To delete an embedded player:

  1. Open the reel and go to the Embedded Player tab
  2. Click Delete player
  3. Confirm the deletion

Once deleted, the iframe on your website will stop working and show an error. Remove or replace the embed code on your site to avoid showing a broken player to visitors.

Common questions

Why can't I create an embedded player?

A few things to check: your reel must be published at least once, it needs at least one audio track in the first Media block, and embedded players require a Starter or Professional plan.

Why don't all my tracks appear in the embedded player?

Embedded players only include audio from the first Media block in your reel. If you have multiple Media blocks, only the first one's audio will appear. Consider consolidating your audio into a single Media block if you want everything in the embed.

Can I embed videos?

No. Embedded players are audio-only. To share videos, send recipients a link to your full reel instead.

Why do some tracks show a placeholder image?

If you enable "Display album art" but some tracks don't have artwork uploaded, those tracks show a placeholder. Upload album art to each track in your Audio library to fix this.

How do I remove the ReelCrafter logo?

The "Hide ReelCrafter logo" option is available on the Professional plan. Enable it in the Player Options section.

Do I need to update my website code when I edit tracks?

No. Track changes (adding, removing, renaming, reordering) sync automatically when you publish your reel. The only change that requires updating your website code is changing the player height.

What analytics are available for embedded players?

You can see play counts on your Dashboard. The Embedded Player Activity section shows plays over time, broken down by reel.

Can I have multiple embedded players from the same reel?

No. Each reel can have one embedded player. If you need different configurations, create separate reels.

Will my embedded player work if I cancel my subscription?

If you downgrade to a plan that doesn't include embedded players, your existing embeds may stop working. Check the terms of your plan for details.

Why isn't my embed working on WordPress.com?

WordPress.com restricts iframes on lower-tier plans. You need a Creator plan ($25/month) or higher for ReelCrafter embeds to work. Alternatively, switch to a self-hosted WordPress.org site, which has no iframe restrictions.

What's the difference between WordPress.com and WordPress.org?

WordPress.org is open-source software you install on your own hosting (like Bluehost, SiteGround, etc.). You have full control and no iframe restrictions. WordPress.com is a hosted service run by Automattic. It's easier to set up but has plan-based restrictions on features like iframes and plugins.

My embed shows a blank space or doesn't load. What's wrong?

The most common cause is placing an iframe inside another iframe. Some website builders wrap custom HTML in an additional iframe, which can prevent the player from loading. Check with your web designer or platform support to ensure your embed code is placed directly in the page HTML, not nested inside another iframe or embed block.

Can I get help adding the embed to my website?

ReelCrafter support can help with creating the embed code and configuring player options, but we can't provide technical support for your website. For help with code placement, styling, or site-specific issues, please contact your web designer or your website platform's support team.

Can I adjust the width and height of the player?

Yes. The embed code includes width and height values you can modify. By default, width is set to 100% (fills the container) and height is set to your chosen pixel value. You can edit these directly in the code after pasting it into your site.

Still need help? Contact Us Contact Us