Embedding Videos

Embed Overview

Cap provides embeddable video players that you can add to any website. Embedded videos include:

Responsive video player
Playback controls
Captions and chapters (if available)
Comments and reactions (optional)
Cap branding (removable with Pro)

Getting Embed Code

From Web Dashboard

Go to your Cap Dashboard
Find your video
Click the Share icon
Select Embed tab
Copy the embed code

Embed URL Format

https://cap.so/embed/VIDEO_ID

Replace VIDEO_ID with your video’s ID from the share link.

Basic Embed Code

HTML Embed

Standard Embed

<iframe
  src="https://cap.so/embed/abc123xyz"
  width="960"
  height="540"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen
></iframe>

Responsive Embed

Make the embed responsive using CSS:

Responsive Embed

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://cap.so/embed/abc123xyz"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

The 56.25% padding-bottom creates a 16:9 aspect ratio. Adjust for different aspect ratios.

Embed Options

Customize the embed with URL parameters:

Autoplay

<iframe src="https://cap.so/embed/abc123xyz?autoplay=true"></iframe>

Most browsers block autoplay with sound. Muted autoplay is more reliable.

Hide Controls

<iframe src="https://cap.so/embed/abc123xyz?controls=false"></iframe>

Start Time

Start video at specific time (in seconds):

<iframe src="https://cap.so/embed/abc123xyz?t=30"></iframe>

Loop Video

<iframe src="https://cap.so/embed/abc123xyz?loop=true"></iframe>

Muted Autoplay

<iframe src="https://cap.so/embed/abc123xyz?autoplay=true&muted=true"></iframe>

Custom Color

Change player accent color:

<iframe src="https://cap.so/embed/abc123xyz?color=FF5733"></iframe>

Combining Parameters

Chain multiple parameters with &:

Multiple Parameters

<iframe 
  src="https://cap.so/embed/abc123xyz?autoplay=true&muted=true&controls=true&color=007AFF"
></iframe>

Embed Sizes

Common Sizes

Standard (16:9)
Vertical (9:16)
Square (1:1)

width="960" height="540"  (Full HD)
width="1280" height="720" (HD)
width="640" height="360"  (SD)

width="360" height="640"  (Mobile)
width="540" height="960"  (HD Mobile)

width="600" height="600"  (Square)
width="800" height="800"  (Large Square)

Responsive Design

CSS Container Method

Full Example

<style>
  .cap-embed-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }
  
  .cap-embed-container::before {
    content: '';
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
  }
  
  .cap-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="cap-embed-container">
  <iframe
    src="https://cap.so/embed/abc123xyz"
    allow="autoplay; fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

Framework-Specific Embedding

React

React Component

import React from 'react';

const CapEmbed = ({ videoId, autoplay = false }) => {
  const src = `https://cap.so/embed/${videoId}${autoplay ? '?autoplay=true&muted=true' : ''}`;
  
  return (
    <div style={{ position: 'relative', paddingBottom: '56.25%', height: 0 }}>
      <iframe
        src={src}
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
        frameBorder="0"
        allow="autoplay; fullscreen; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
};

export default CapEmbed;

Vue

Vue Component

<template>
  <div class="cap-embed">
    <iframe
      :src="embedUrl"
      frameborder="0"
      allow="autoplay; fullscreen; picture-in-picture"
      allowfullscreen
    />
  </div>
</template>

<script>
export default {
  props: {
    videoId: {
      type: String,
      required: true
    },
    autoplay: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    embedUrl() {
      let url = `https://cap.so/embed/${this.videoId}`;
      if (this.autoplay) url += '?autoplay=true&muted=true';
      return url;
    }
  }
};
</script>

<style scoped>
.cap-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.cap-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

WordPress

WordPress Shortcode

[iframe src="https://cap.so/embed/abc123xyz" width="960" height="540"]

Or use the Gutenberg block:

Add Custom HTML block
Paste embed code
Preview and publish

Embed Features

Included Features

All embeds include:

Video playback
Play/pause controls
Volume control
Fullscreen button
Progress bar
Quality selector
Speed controls
Keyboard shortcuts

Optional Features

Depending on video settings:

Captions: AI-generated subtitles
Chapters: Navigable chapter markers
Comments: Timestamped discussion (Pro)
Reactions: Emoji reactions (Pro)
Transcript: Searchable transcript sidebar (Pro)

Embed Privacy

Visibility Settings

Embedded videos respect privacy settings:

Unlisted: Embedded video is accessible
Password Protected: Viewers must enter password
Private: Embed shows access denied message

Password-protected embeds display a password input before showing the video.

Analytics

Embed views are tracked:

View counts include embedded views
Referrer information shows embedding domains
Watch time and engagement are recorded

See Video Analytics for details.

Removing Cap Branding (Pro)

Cap Pro Required

Remove “Powered by Cap” branding from embeds:

Go to video settings
Enable Hide Cap branding
Embed will show clean player without logo

Performance Optimization

Lazy Loading

Improve page performance by lazy loading embeds:

Lazy Loading

<iframe
  src="https://cap.so/embed/abc123xyz"
  loading="lazy"
  width="960"
  height="540"
></iframe>

Thumbnail Placeholder

Show thumbnail until user clicks to play:

Click-to-Play

<div class="cap-placeholder" onclick="this.innerHTML='<iframe src=\'https://cap.so/embed/abc123xyz?autoplay=true\' width=\'960\' height=\'540\'></iframe>'">
  <img src="https://cap.so/api/video/abc123xyz/thumbnail.jpg" alt="Video Thumbnail">
  <button>Play Video</button>
</div>

Security Considerations

Content Security Policy

Allow Cap embeds in your CSP:

CSP Header

Content-Security-Policy: 
  frame-src https://cap.so https://*.cap.so;

HTTPS Required

Always use HTTPS for embed URLs:

✓ https://cap.so/embed/...

✗ http://cap.so/embed/...

Troubleshooting

Embed not displaying

Check that video ID is correct
Ensure iframe is not blocked by CSP
Verify video is not set to private
Check browser console for errors

Autoplay not working

Add &muted=true parameter
Autoplay with sound is blocked by most browsers
Ensure allow="autoplay" attribute is set

Embed not responsive

Use the responsive embed code provided above
Check that parent container has width set
Verify CSS is loading correctly

Video quality is poor

Increase iframe dimensions
Check source video resolution
Player automatically adapts to network speed

Example Implementations

Blog Post

Blog Article

<article>
  <h1>How to Use Cap</h1>
  <p>Watch this tutorial to get started:</p>
  
  <div style="position: relative; padding-bottom: 56.25%; height: 0; margin: 2rem 0;">
    <iframe
      src="https://cap.so/embed/tutorial-123"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      frameborder="0"
      allow="autoplay; fullscreen; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
  
  <p>Continue reading...</p>
</article>

Landing Page Hero

Hero Section

<section class="hero">
  <div class="container">
    <h1>See Cap in Action</h1>
    <div class="video-wrapper">
      <iframe
        src="https://cap.so/embed/demo-456?autoplay=true&muted=true&loop=true"
        width="1280"
        height="720"
        frameborder="0"
        allow="autoplay; fullscreen; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</section>

Documentation

Docs Page

<div class="docs-video">
  <h3>Video Tutorial</h3>
  <iframe
    src="https://cap.so/embed/docs-789"
    width="800"
    height="450"
    frameborder="0"
    allow="fullscreen; picture-in-picture"
    allowfullscreen
  ></iframe>
  <p class="caption">Watch the full walkthrough above.</p>
</div>

Desktop App

Web Platform

Features

​Embed Overview

​Getting Embed Code

​From Web Dashboard

​Embed URL Format

​Basic Embed Code

​HTML Embed

​Responsive Embed

​Embed Options

​Autoplay

​Hide Controls

​Start Time

​Loop Video

​Muted Autoplay

​Custom Color

​Combining Parameters

​Embed Sizes

​Common Sizes

​Responsive Design

​CSS Container Method

​Framework-Specific Embedding

​React

​Vue

​WordPress

​Embed Features

​Included Features

​Optional Features

​Embed Privacy

​Visibility Settings

​Analytics

​Removing Cap Branding (Pro)

​Performance Optimization

​Lazy Loading

​Thumbnail Placeholder

​Security Considerations

​Content Security Policy

​HTTPS Required

​Troubleshooting

​Example Implementations

​Blog Post

​Landing Page Hero

​Documentation

​Next Steps

Sharing Videos

Analytics

Build docs developers (and LLMs) love

Embed Overview

Getting Embed Code

From Web Dashboard

Embed URL Format

Basic Embed Code

HTML Embed

Responsive Embed

Embed Options

Autoplay

Hide Controls

Start Time

Loop Video

Muted Autoplay

Custom Color

Combining Parameters

Embed Sizes

Common Sizes

Responsive Design

CSS Container Method

Framework-Specific Embedding

React

Vue

WordPress

Embed Features

Included Features

Optional Features

Embed Privacy

Visibility Settings

Analytics

Removing Cap Branding (Pro)

Performance Optimization

Lazy Loading

Thumbnail Placeholder

Security Considerations

Content Security Policy

HTTPS Required

Troubleshooting

Example Implementations

Blog Post

Landing Page Hero

Documentation

Next Steps