Requirements
You must be a PixelMixer Workspace admin to complete the steps below.
Embedding is only supported for PixelMixer Teams and Enterprise accounts
Why would I want to embed PixelMixer?
One of the most flexible capabilities of PixelMixer is it's ability to integrate with other websites. For example, almost any aspect of PixelMixer, such as Channels, Playlists, and Videos, can be seamlessly incorporated as a feature of an existing portal.
This means you can augment and compliment other web sites and applications with the power of video using PixelMixer.
Example of PixelMixer embedded videos:
How do I add PixelMixer to my website?
Each module of PixelMixer, including the entire app itself, can be easily integrated within your HTML web page or 3rd party portal using iFrames. Generating the iFrame code is simple and many portals have the ability to paste it in directly without the need for a web developer.
Step by Step
To generate the iFrame embed code, open any channel, playlist or video and click the 3 dots to open the menu and choose "Embed":
2. From the Embed Form, click "Generate Code" to copy the HTML code to your clipboard.
3. Paste this code into your website where you wish for your videos to appear.
Advanced Options
Under the Advanced Display Options section you will find settings to precisely control the features users will see when PixelMixer is embedded within your website. This allows you to tailor the experience for with the functionality you need and ensure users are able to interact in the desired ways without getting distracted.
Display Modes
Multiple display modes are available for embedded PixelMixer components so you can further tailor the experience to match what is required for the hosting website or portal.
These modes are set by default in the generated iFrame embed script but can be modified by setting the URL parameters.
Mode Descriptions
Chromeless: (&chromeless=true) Chromeless mode hides the top header and left hand side drawer that is normally displayed through within the PixelMixer app. This mode is handy if you wish to embed the entire PixelMixer application, including the dashboard, within another website. Chromeless mode is automatically applied when any of the other modes below are enabled.
Gallery Mode: (&galleryMode=true) Gallery mode is designed for embedding channels into websites but the video listing (the gallery) is displayed by default. Only when clicking one of the videos in the gallery does the player appear.
Playlist Mode: (&playlistMode=true) Playlist mode displays the video listing to the right hand side of the video player. This is a very compact view and designed for users to watch videos one after another. Although this mode is primarily for playlists, it can be used with channels, as well.
Player Only: (&playerOnly=true) Player only mode is useful when you want to embed only a single video in a website with no other features.
Keeping Fit
One challenge with iFrames is resizing them when the content becomes lengthy. This avoids showing annoying scrollbars within a page or confusing users with where a section starts/stops.
To address this, PixelMixer fires an event (postMessage) which your website can listen to adjust the size of the iFrame accordingly. Use the code below as a reference for how to resize parts of your website to accommodate changes to the height of the page as the user interacts with embedded PixelMixer components.
<iframe id="pixelmixer-iframe" ... />
...
<script>
const pixelMixerResizeListener = (message) => {
if (message.messageType === 'pixelMixerResizeEvent') {
const pixelMixerIframe =
document.getElementById('pixelmixer-iframe');
pixelMixerIframe.style.height = message.height + 'px';
}
};
window.addEventListener("message", pixelMixerResizeListener, false);
</script>