Embed your Capsule

A simple way to embed Capsule content into your website

Basic Usage

The simplest form of the embed code will display a grid with your Capsule content, and inherits colors/styles from your Capsule:

<script src="https://embed.capsule.video/grid.js"></script>
<script>
new Capsule({
slug: "your-capsule-slug"
})
</script>

The slug is your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the domain replacing "." with "-" (e.g. www-yourdomain-com). Feel free to use demo-pro for integration testing.

Additional Parameters

Various parameters can be added to control what content is displayed and how it's presented:

<script src="https://embed.capsule.video/grid.js"></script>
<script>
new Capsule({
slug: "your-capsule-slug",
el: "#your-div-id",
category: "some-category-name",
contentSlugs: ["yIxKz6N2nlrn", "R_ONI1r1nloy"],
cols: 4,
mobileCols: 2,
maxItems: 10,
cta: false,
metaDisplay: true,
favoritesOnly: true,
animated: false,
})
</script>

Parameter

Description

Default

slug

Your subdomain (e.g. your-capsule-slug.capsule.video) or, in the case of a custom domain, the full domain replacing "." with "-" (e.g. www-yourdomain-com)

el

Optionally specify an #id or .class to append Capsule content within an existing div rather than inline below this script tag

category

Specify a category from your capsule to only display content from that category

contentSlugs

Specify one or more slugs for the content items in the order you want them to appear. These slugs can be found by via the last URL parameter when viewing content in a Capsule. This overrides the category and favoritesOnly parameters.

cols

Number of columns

5

mobileCols

Number of columns on mobile (portrait-oriented display)

3

maxItems

Maximum number of videos to display. Currently, this can be set to anything lower than 25, but not higher.

25

cta

Whether to display the Call To Action (record button at the bottom), unless set to false or if the Capsule is no longer accepting submissions.

true

metaDisplay

Whether to metadata over the thumbnails (e.g. name, category)

false

favoritesOnly

Only display content favorited in Capsule Admin

false

animated

Whether to animate the thumbnails

true

Alternate Method (iframe)

While the embed code is preferred, in some cases it may be necessary to embed the entire capsule experience on another site via an iFrame.

Here's an example iframe tag that requests the necessary permissions:

<iframe src="https://your-capsule-url" allow="camera; microphone" width="100%" height="100%" frameBorder="0" allowusermedia></iframe>

If you do not have a Capsule yet, you can use "https://demo-pro.capsule.video" as the URL for testing.

The parent page must be loaded via https (SSL/TLS) to enable camera/mic usage.