Embed videos

Install Node.js

1. Download Node.js
2. Install it on your computer
3. The installation script will verify Node.js is installed automatically

Important: Node.js must be installed manually before running the CLI. The script will check if it's installed and show an error if it's missing.

Create Cloudflare account

1. Go to Cloudflare
2. Create a free account
3. Verify your email address

Note: Wrangler (Cloudflare CLI) will be installed automatically by the script if needed - you don't need to install it manually.

Run the installation command

Open your terminal and run:

npx @bebranded/embed-videos init

‍

Follow the interactive setup

The CLI will guide you through:

Prerequisites check

• Verifies Node.js is installed
• Installs Wrangler automatically if needed

Cloudflare authentication

• If not logged in, a browser window will open
• Log in to your Cloudflare account
• Authorize the CLI

Select Cloudflare account (if you have multiple accounts)

• Choose the account where you want to deploy

Choose Worker name

• Enter a name for your Worker (default: embed-videos)
• Example: `my-video-embed` or `client-videos`

‍

⚠️ If R2 is not enabled on your account

If you see this message: ⚠️  R2 is not enabled on this Cloudflare account.

‍

The CLI will automatically open your Cloudflare dashboard. Follow these steps:

1. In the left panel, click "Storage & Databases"
2. Click "R2 object storage"
3. Click "Overview"
4. Click "Get started"
5. Add your payment method (credit card)
   • You will only be charged if you exceed Cloudflare's free limits
   • Otherwise, it's completely FREE (€0)
   • Cloudflare's free tier includes:
     • 10GB storage
     • 1M Class A operations/month (uploads)
     • 10M Class B operations/month (views/downloads); so don't worry, you won't be charged.
6. Wait a few minutes for R2 to be activated on your account
   
   • The CLI will automatically check if R2 is operational
   • It will retry up to 3 times with 5-second intervals
   • You'll see messages like: `⏳ Attempt 1/3: R2 is not yet operational. Waiting...`
   • Press Enter in the terminal** after enabling R2 to continue

‍

Note: If R2 was just activated, the CLI will  create a new bucket (you won't be asked to choose between creating or using an existing one, since there are no buckets yet).

‍

R2 Bucket configuration

• ‍Option A: Create a new bucket
  
  • Enter a bucket name (default: embed-videos-storage)‍
• Option B: Use an existing bucket
  
  • Select from your existing buckets

Cloudflare Access configuration (required)

• Enter your email address (for Access policy)
• Enter your Cloudflare API Token with Zero Trust permissions
• Required permissions:
  
  • Account → Access: Apps and Policies → Edit
  • Account → Access: Organizations, Identity Providers, and Groups → Edit
  • Account → Account Settings → Read
• The CLI will automatically configure Access to protect your dashboard

Automatic deployment

• The CLI will generate all necessary files
• Deploy your Worker to Cloudflare
• Configure Cloudflare Access automatically
• Display your dashboard URL

‍

Installation complete

After installation, you'll see:

✅ Installation completed successfully!

📺 Your dashboard is available at:
   https://your-worker-name.workers.dev/dashboard

📝 Next steps:
   1. Go to your dashboard
   2. Upload videos
   3. Use the embed codes on your website

Important: Your dashboard is protected by Cloudflare Access. Only authorized users (your email) can access it. The dashboard URL is `/dashboard` - make sure to use the full URL with `/dashboard` at the end.

Save this URL → you'll need it to access your dashboard.

Dashboard URL

Your dashboard is available at: https://your-worker-name.workers.dev/dashboard

Note: The dashboard is on `/dashboard`, not the root URL. Make sure to include `/dashboard` in the URL.

Cloudflare Access protection

Your dashboard is automatically protected by Cloudflare Access:

• ‍Only authorized users (your email) can access the dashboard‍
• Videos remain public - `/api/video/*` and `/player/*` routes are accessible to everyone‍
• Log out button is always visible in the dashboard header

First-time access

1. Go to your dashboard URL: `https://your-worker-name.workers.dev/dashboard`
2. You'll see a Cloudflare Access login page
3. Enter your authorized email address
4. Check your email for the access code
5. Enter the code to access your dashboard

Logging out

Click the Log out button in the dashboard header to disconnect from Cloudflare Access.

Access your dashboard

Go to your Worker URL with `/dashboard` (e.g., `https://your-worker-name.workers.dev/dashboard`)

You'll see your video dashboard with:

• Left sidebar: Tags and statistics
• Main area: Video list and upload zone

Upload videos

Method 1: Drag & Drop

1. Drag a video file onto the upload zone
2. Wait for upload to complete
3. Your video will appear in the list

Method 2: Click to Browse

1. Click Select Video button
2. Choose a video file from your computer
3. Wait for upload to complete

Supported formats: MP4, WebM, OGG

Maximum file size: 1 GB per video

‍

Organize with tags

Create a tag

1. Click the + button in the left sidebar (under Tags)
2. Type a tag name (e.g., "Portfolio", "Tutorials")
3. Press Enter or click outside to save

Add tags to videos

1. Click + Add tag on any video
2. Select existing tags or create new ones
3. Tags help organize and filter your videos

Filter by tag

1. Click any tag in the left sidebar
2. Only videos with that tag will be displayed
3. Click All videos to see everything

Edit or delete tags

1. Click the edit icon (✏️) next to a tag name to rename it
2. Click the delete icon (🗑️) to remove a tag
3. If a tag is deleted, it will be removed from all associated videos

Edit video title

1. Click the edit icon (✏️) next to a video title
2. Type the new name
3. Press Enter or click outside to save

Get video URL

1. Click Copy URL on any video
2. The video URL is copied to your clipboard
3. A checkmark icon will appear briefly to confirm
4. Use this URL to link directly to the video

Get embed code

1. Click Embed code on any video
2. A modal will open with:
   • Video player preview (left side) - updates in real-time
   • Iframe code (right side) - updates automatically

Customize embed code

The embed code modal includes real-time customization options:

Border Radius

• Use the slider to adjust corner rounding
• Preview updates instantly without reloading the video

Autoplay

• Check to enable automatic playback

Note: When autoplay is enabled, muted is automatically enabled (required by most browsers)

Muted

• Check to start video muted
• Automatically enabled when autoplay is selected

Loop

• Check to make video repeat automatically

Copy the code

1. Adjust settings to your preference
2. Click Copy on the iframe code block
3. A checkmark will appear to confirm
4. Paste it into your website's HTML

Method 1: Embed Element

1. Add an Embed element to your page
2. Click the embed element
3. Paste your iframe code from the dashboard
4. Publish your site

Method 2: HTML Editor

1. Add an HTML element or switch to HTML mode
2. Paste your iframe code
3. Save and publish

‍

Example embed code

<iframe 
  src="https://your-worker-name.workers.dev/player/video_1234567890_mp4" 
  width="100%" 
  height="100%" 
  frameborder="0" 
  allowfullscreen 
  style="border-radius: 8px;">
</iframe>

‍

Customize video display

You can modify the iframe attributes:

• ‍Width/Height: Change `width="100%"` and `height="100%"` to specific pixels or percentages‍
• Border Radius: Modify `border-radius: 8px;` in the style attribute‍
• Aspect Ratio: Use CSS to maintain aspect ratio:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

View statistics

Your dashboard shows real-time statistics in the left sidebar:

• ‍Storage Available: How much of your 10GB free storage you're using‍
• Class A Operations: Upload operations (1M free per month)‍
• Class B Operations: View/download operations (10M free per month)

Statistics are automatically updated when you reload the dashboard.

Storage limits

• ‍Free Tier: 10GB storage‍
• Class A Operations: 1M operations/month (uploads)‍
• Class B Operations: 10M operations/month (views/downloads)

If you exceed these limits, Cloudflare will charge based on their pricing. Monitor your usage in the dashboard to stay within free limits.

Dashboard not loading

• Check that your Worker is deployed: Go to Cloudflare Dashboard → Workers & Pages
• Verify the URL is correct (must include `/dashboard`)
• Clear your browser cache
• Check browser console for errors
• Make sure you're logged in with Cloudflare Access

Upload fails

• Check file size (recommended: under 1GB per video)
• Verify file format (MP4, WebM, or OGG)
• Check your internet connection
• Verify R2 bucket is properly configured in Cloudflare Dashboard

‍

‼️ R2 not enabled / Activation issues

If you see errors about R2 not being enabled:

1. Follow the activation steps carefully:
   • Go to Cloudflare Dashboard
   • Navigate to: Storage & Databases → R2 object storage → Overview
   • Click "Get started" or "Enable R2"
   • Add payment method (you won't be charged unless you exceed free limits)
2. Wait for activation:
   • R2 activation can take a few minutes
   • The CLI will automatically retry checking if R2 is operational
   • You'll see progress messages: `⏳ Attempt X/3: R2 is not yet operational. Waiting...`
3. If activation fails:
   • Make sure you completed all steps in the Cloudflare dashboard
   • Wait 5-10 minutes and try again
   • Check that your payment method was added successfully
   • Verify your account has the necessary permissions

‍

Embed code not working

• Verify the iframe code is complete
• Check that the video URL is accessible (try opening it directly in a browser)
• Ensure CORS is enabled (should be automatic)
• Verify the video ID in the URL is correct

Can't access dashboard

• Make sure you're using the correct URL with `/dashboard` at the end
• If Cloudflare Access is enabled, ensure you're logged in with an authorized email
• Check that your email is in the Access policy
• Try logging out and logging back in
• Clear browser cookies for the domain

Statistics not updating

• Statistics update automatically on page reload
• Wait a few seconds after uploading a video
• Check that your R2 bucket is properly configured

Cloudflare Access issues

• Verify your API token has the correct permissions:
  
  • Account → Access: Apps and Policies → Edit
  • Account → Access: Organizations, Identity Providers, and Groups → Edit
  • Account → Account Settings → Read
• Check that the Access application was created successfully in Cloudflare Zero Trust
• Verify the application is configured for `/dashboard` path