Embed Bynder Content

Enabling an embed code for your assets allows you to embed Bynder images, documents, or videos on your website, external channels, or CX User Community. You can embed individual assets or create an embed code for a collection to embed more than one asset. Click here to learn how to embed your media securely for Bynder users.

How to Embed an Image or Document

Navigate to your Asset Bank.
Select an Asset (image or document). To embed videos, click here.
In the Info tab, scroll down to Embed media.
Check the boxes to enable the following:
- Include title: The asset's title will appear at the bottom of the embed. This option is selected by default but can be unchecked.
- Include lightbox: The lightbox is an overlay and shows the available derivatives for the asset. You can open the lightbox by clicking on the embedded asset. When the download option is enabled, the users can download the derivatives individually from this view.
- Enable download: This option shows a download button at the bottom of the embed. The download will include the original file and its available derivatives.
- Media is embeddable: Click on this to make your asset embeddable on a website. Click here to embed secure media.
Once you’ve made your selections, click Save.
Copy and Paste the embed code and use it on your website or external solution.
If you change the selected options, the embed code will automatically change.
- After making changes, copy the new embed code and implement this on your website.

How to Delete an Embed Code for a Single Asset

Navigate to your Asset Bank.
Select the Asset from which you would like to remove the embed code.
Scroll to the Info Tab > Embed Media.
Unselect the Media is Embeddable checkbox.
Remove the embed code from your website or external solution.

How to Embed a Video

We recommend embedding Bynder videos using the Bynder embed code. Alternatively, you can embed a video using a public URL and HTML5.

Navigate to your Asset Bank.
Select an Asset (video).
In the Info tab, scroll down to Embed media.
Check the boxes to enable the following:
- Autoplay: This will automatically play the video once the embed is loaded on your website. By default, the video will be muted. Unmute the video by clicking
Input the width and height to configure the output size of the embedded video player.
Copy the embed code and embed it on your website or any other external solution.
If you change the selected options, the embed code will automatically change.
- After making changes, copy the new embed code and implement this on your website.

Tip

Do you want to embed multiple video files at once? Add the video files to a collection and embed the collection. Read more about it here.
We don't recommend embedding videos using iFrame. Read more about our iFrame support.

Embed a Video using HTML5.

Use the example code below and replace the URL of the src attribute with Bynder's public video link. This can be the URL to an asset's original file marked as public or the URL to a public derivative.

Original file

<video controls="" controlslist="nodownload">
  <source src="https://example.bynder.com/m/[idhash]/original/[asset-name].mp4" type="video/mp4">
</video>

Derivative

<video controls="" controlslist="nodownload">
  <source src="https://example.bynder.com/m/[idhash]/[derivative-prefix]-[asset-name].mp4" type="video/mp4">
</video>

Derivative (with custom thumbnail)

<video controls="" controlslist="nodownload" poster="https://example.bynder.com/m/[idhash]/[derivative-prefix]-[asset-name].[file-extension]">
  <source src="https://example.bynder.com/m/[idhash]/[derivative-prefix]-[asset-name].mp4" type="video/mp4">
</video>

Note

Only WebM and MP4 files can be embedded with HTML5.
The end user's browser needs to support HTML5 video playback for the embed to work.

Embed Bynder Content

How to Embed an Image or Document

Note

Tip

How to Delete an Embed Code for a Single Asset

How to Embed a Video

Tip

Note

Embed a Video using HTML5.

Note

How to Embed A Collection

FAQ

In this article

<%= heading %>

<%= block.name %>

Categories

Toggle navigation menu

<%= category.name %>