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.
I want to embed a single image or document
-
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.
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.
I want 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.
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 the Bynder 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.
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.
Embed a Video Using HTML5
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.
I want to embed a collection
Who can embed collections?
Users with the following right(s) can embed collections:
-
Embed collections
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.
I want to remove an embed
For which media do you want to remove the embed?
I want to remove an embedded image or document
-
Go to the asset for which you want to remove the embed.
-
Untick the Media is embeddable box.
-
Remove the embed code from your website or external solution.
Hover over the image below for a visual walkthrough
Comments
0 comments
Article is closed for comments.