Do you want to display your images externally without having to download the images first? With Bynder you can easily embed your images, videos and documents on your website.
You can embed files individually, but you can also create an embed code for a collection, so that you can embed multiple files at the same time. Make your selection below.
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
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.
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.
I want to embed a collection
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.
I want to remove an embed
For which media do you want to remove the embed?
Comments
0 comments
Article is closed for comments.