IntegrationPlayer Embedding
✨

New player is in beta! To try it out use https://video.wellcomemat.com/embed/<hash>

Player Embedding

This guide provides clear instructions on how to embed WellcomeMat media and playlists into your website using iframes. It covers embedding options, customization parameters, and best practices for responsive and dynamic media embedding.

1. Viewing Media

To directly view a video without embedding it, use its public landing page URL:

https://www.wellcomemat.com/video/<hash>

Replace <hash> with the unique media hash.

2. Embedding Media

You can embed WellcomeMat media into your website using iframes. The WellcomeMat player is responsive and supports various aspect ratios, including 16:9, 4:3, vertical videos (e.g., 9:16), and square videos (e.g., 1:1).

Single Media Embed

There are two ways to identify a media item for embedding:

  1. Media Hash (a global WellcomeMat identifier)
  2. userid + customid (your unique userid and a custom identifier you provide)

MLS Usage

If you are embedding on behalf of an MLS (Multiple Listing Service):

  1. Use the Media Hash method if you have obtained the WellcomeMat hash for a given listing.

    • If an agent/broker re-uploads, edits, or unbrands the media, then the hash will stay the same.
    • If an agent/broker deletes the associated WellcomeMat media, then adds a new one, the hash will change.

  2. Use the userid + customid method if you have the MLS association’s ListingId. In this case supply it into the customid field.

Embed Examples

Example using Media Hash

<iframe
  src="https://www.wellcomemat.com/embed/<MEDIA-HASH>"
  width="640"
  height="360"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>

Replace <MEDIA-HASH> with the actual media hash value.

Example using userid + customid

<iframe
  src="https://www.wellcomemat.com/embed/customid=<CUSTOM-OR-PROPERTY-ID>&userid=<YOUR-USER-ID>"
  width="640"
  height="360"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>

Replace <CUSTOM-OR-PROPERTY-ID> and <YOUR-USER-ID> with your custom ID and WellcomeMat user ID.

Hero Player Embed

A hero player is a special embed with no user controls, designed for autoplay and looping. This player is typically used as a large, visually engaging element on landing pages.

To enable hero mode, add the parameter hero=1 to the iframe URL and set the width and height to 100%:

<iframe
  src="https://www.wellcomemat.com/embed/<MEDIA-HASH>?hero=1"
  width="100%"
  height="100%"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>

3. Embedding Playlists

You can embed an entire playlist by specifying its unique playlist ID.

Basic Playlist Embed

<iframe
  width="740"
  height="660"
  src="https://www.wellcomemat.com/e/playlist/<PLAYLIST-ID>"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>
  • Replace <PLAYLIST-ID> with the actual playlist ID.

Custom Color Scheme (Optional)

You can optionally apply a custom color scheme to the player by appending a color scheme string (hexadecimal values) to the playlist URL:

/<channel-background-color>/<playlist-title>/<thumbnail-border>/<active-thumbnail-border>/<thumbnail-title>

WellcomeMat provides a user interface to generate these colors through the Manage Playlist page.

Example:

<iframe
  width="740"
  height="660"
  src="https://www.wellcomemat.com/e/playlist/<PLAYLIST-ID>/4f004f/cf04cf/cecece/ff0000/0000ff"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>

Hero Playlist Embed

A hero playlist contains up to 12 videos and is designed to autoplay without user controls. It’s ideal for use as a large graphic element on homepages or marketing landing pages.

Example:

<iframe
  id="wm-hero-playlist"
  width="100%"
  height="100%"
  src="https://www.wellcomemat.com/e/playlist/<PLAYLIST-ID>?hero=1"
  scrolling="no"
  frameborder="0"
  referrerpolicy="unsafe-url"
  allowfullscreen="true"
  webkitallowfullscreen
  mozallowfullscreen
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation"
>
</iframe>

4. Best Practices for Embedding

  • Aspect Ratio Support:
    WellcomeMat’s player automatically maintains the original aspect ratio of the media, whether it’s 16:9, 4:3, vertical (e.g., 9:16), and square (e.g., 1:1). Ensure that your iframe’s width and height are set appropriately for responsive playback. Black bars (letterboxing) will occur when iframe dimensions do not fit the video dimensions.

  • Responsive Embedding:
    Use CSS to make the iframe responsive. Here’s a simple example:

    .responsive-iframe {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

  • Browser Compatibility:
    The WellcomeMat player supports modern browsers. However, always test embeds on multiple devices and browsers for the best experience.

5. Troubleshooting

Common Issues

  1. Video Not Displaying Correctly
    Ensure the iframe URL is correctly formed with the appropriate media hash or playlist ID.

  2. Aspect Ratio Distortion
    Double-check that the width and height attributes or responsive CSS settings are properly applied.

  3. Player Responsiveness Issues
    Use the recommended responsive iframe CSS approach to ensure proper scaling across devices.

6. FAQ

  • How do I enable autoplay for embedded videos?
    Add autoplay=1 to the iframe URL. Because of modern restrictions on browsers, videos may not autoplay unless the user interacts with the media element.

  • Can I embed private videos?
    No, only public videos are embeddable.

Getting StartedToolset Integration