# Embed a video collection

{% hint style="info" %}
A quick and easy way to get started with embed codes is in your [Capsule Dashboard](https://admin.capsule.video), by clicking the **···** menu on a Collection, and selecting Embed
{% endhint %}

## Basic Usage

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

```markup
<div>
  <script>(function(c,a,p,s,u,l,e){c["_capsuleDotVideoIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    if(!e){u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;
    l=a.currentScript?.parentElement||a.body;l.appendChild(u);}}})
    (window,document,"capsuleDotVideo","https://embed.capsule.video/grid.js");
    capsuleDotVideo({
      slug: "your-capsule-slug",
      el: document.currentScript.parentElement
    })
  </script>
</div>
```

{% hint style="info" %}
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.
{% endhint %}

## Additional Parameters

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

```markup
<div>
  <script>(function(c,a,p,s,u,l,e){c["_capsuleDotVideoIdent"]=p;c[p]=c[p]||function(){
    (c[p].q=c[p].q||[]).push(arguments);e=a.querySelector("script[data-capsule='"+p+"']");
    if(!e){u=a.createElement("script");u.async=1;u.src=s;u.dataset["capsule"]=p;
    l=a.currentScript?.parentElement||a.body;l.appendChild(u);}}})
    (window,document,"capsuleDotVideo","https://embed.capsule.video/grid.js");
    capsuleDotVideo({
      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>
</div>
```

| **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 content item slugs, in the order you want them to appear. These slugs are the unique ID at the end of the URL when viewing a video in a public-facing 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:

```markup
<iframe src="https://your-capsule-url" allow="camera; microphone; clipboard-read; clipboard-write" 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.

{% hint style="info" %}
The parent page must be loaded via https (SSL/TLS) to enable camera/mic usage.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.capsule.video/displaying-videos/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.