Embed Bynder Content

Knowledge Base

Embed Bynder Content

Display your images externally without having to download the images first by embedding your images, videos and documents on your website.

You can embed files individually, or create an embed code for a collection.

Open the asset (image or document) that you want to embed
Click Embed media in the Info tab.
Tick the Media is embeddable box.
Select the options you want to enabled for the embed.
- Include title
  This option is selected by default and will show the title of the asset at the bottom of the embed.
- 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 original file and available derivatives will be included in the download.
Copy the embed code and embed it on your website or any other external solution.
Optionally, if you make any changes to the selected options the embed code will change. So after making changes, make sure you copy the new embed code and implement this on your website.
Click for a visual walkthrough

Note

The options you selected are stored in the embed code on your website and will therefore not be saved in the portal. The moment you close the Info tab the tick boxes will be reset.

Tip

Do you want to embed multiple images and documents at once. Add the assets to a collection and embed the collection. Read more about it here.

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

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.

Open the video asset you want to embed.
Click Embed media in the Info tab.
Tick the Media is embeddable box.
Select the options you want to enabled for the embed.
- 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 the
Use one of the available dimensions to configure the output size of the embedded video player by filling in the width and height boxes.
Copy the embed code and embed it on your website or any other external solution.
Optionally, if you make any changes to the selected options the embed code will change. So after making changes, make sure you copy the new embed code and implement it on your website.
Click for a visual walkthrough

Note

The options you selected are stored in the embed code on your website and will therefore not be saved in the portal. The moment you close the Info tab the tick boxes will be reset.

Use the example code below and replace the URL of the src attribute with a public video link of Bynder. This can be the URL to the original file of an asset that is 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 browser of the end user needs to support HTML5 video playback in order for the embed to work.

Embed an existing collection to easily embed the files together or add multiple files to a new collection, so that you can embed them all at once.

Note

If you embed a collection, this collection becomes public and accessible to everyone. Even users who normally cannot download the collection will be able to download this collection.

Go to Collections and click My collections in the filter menu.
Click in the right bottom corner of the collection thumbnail and click Create embed. The collection can now be embedded.

Copy the embed code and embed it on your website or external solution. You can find an example of a collection embed code below.

<div data-bynder-widget="media-list" data-collection-id="38CBD86A-28F1-40E8-B87B5F3CE3EF47B8" data-rows="3"><script id="bynder-widgets-js" data-account-url="byndair.bynder.com" data-language="en" src="https://d8ejoa1fys2rk.cloudfront.net/bynder-embed/latest/bynder-embed.js"></script></div>

(Optional) By default, the embed displays three rows with assets. In order to see more assets users can scroll down inside the embed. If you want to display a different default number of rows, change the data-rows="X" value to the desired number of rows. If a collection does not have enough assets to fill all the default rows, the rows will be filled with blank space.

Note

An embed of a collection can display a maximum number of 250 assets. If your collection contains more than 250 assets the exceeding assets won't be shown in the embed.

Click for a visual walkthrough

For which media do you want to remove the embed?

Click for visual walkthrough

Learn more

In this section:

Was this helpful?

Knowledge Base

Embed Bynder Content

Note

Tip

Tip

Note

Note

Note

Note

Learn more

Search results