Embed Time-Lapse Widgets on Your Website

Embed interactive time-lapse players on your website to showcase your webcam footage. Visitors can navigate through time, control playback speed, and watch your location’s activity compressed into seconds.

Widget Types

webcam.io offers several embed options:

Available widget types
Widget Type	Description	Best For
Time-lapse Player	Full interactive player with controls	Main website integration
Latest Image	Single static image, auto-updating	Sidebar, thumbnails
Animated Preview	GIF animation of recent footage	Social media, previews
Video Embed	MP4/WebM video player	Specific day/clip playback

Quick Start: Get Your Embed Code

Log in to webcam.io Dashboard
Go to Widgets / Embed → Select your camera
Choose your settings (size, time range, controls)
Copy the generated code
Paste into your website HTML

Time-Lapse Player Widget

The main widget type — an interactive player showing your time-lapse footage.

Basic Embed Code

<iframe 
  src="https://webcam.io/webcams/CAMERA-ID?embed=1" 
  width="640" 
  height="480" 
  frameborder="0"
  scrolling="no">
</iframe>

Replace CAMERA-ID with your webcam ID (found in Dashboard → Webcams).

With Time Range

Show a specific time range:

<iframe 
  src="https://webcam.io/webcams/CAMERA-ID/24-hours?embed=1" 
  width="640" 
  height="480" 
  frameborder="0">
</iframe>

Available Time Ranges

Time range options
Range Code	Description
`15-minutes`	Last 15 minutes
`30-minutes`	Last 30 minutes
`1-hour`	Last hour
`3-hours`	Last 3 hours
`6-hours`	Last 6 hours
`12-hours`	Last 12 hours
`24-hours`	Last 24 hours
`full-day`	Current day (midnight to now)
`sunrise`	Last sunrise period
`sunset`	Last sunset period
`day`	Daytime only (sunrise to sunset)
`night`	Nighttime only
`week`	Last 7 days
`month`	Last 30 days
`year`	Last 365 days

Custom Time Ranges

Use the from and to parameters for custom ranges:

<!-- Yesterday's footage -->
<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&from=yesterday%2000:00&to=yesterday%2023:59">
</iframe>

<!-- Specific time window -->
<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&from=12:00&to=14:00">
</iframe>

<!-- Last 2 days -->
<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&from=2%20days%20ago&to=now">
</iframe>

Supported custom range formats:

Custom range format examples
Format	Example
Relative time	`2 days ago`, `yesterday`, `3 hours ago`
Time of day	`12:00`, `6:31am`, `14:30`
Weekday	`last week monday 00:00`, `last sunday 10:00`
Specific date	`2025-01-15 08:00:00`, `January 15 at 7pm`

URL Encoding

When using spaces in URLs, encode them as %20. For example: yesterday%2000:00 instead of yesterday 00:00.

Widget Parameters

Customize your widget with URL parameters:

Full Parameter Reference

https://webcam.io/webcams/CAMERA-ID/RANGE?param1=value1&param2=value2

Widget URL parameters
Parameter	Values	Description
`embed`	`1`	Required for iframe embedding
`w`	pixels (e.g., `640`)	Image/player width
`h`	pixels (e.g., `480`)	Image/player height
`nc`	`0` or `1`	Hide controls & captions (1 = hidden)
`bc`	hex color (e.g., `A5A5A5`)	Background color
`col`	hex color	Text color
`fps`	`1`, `2`, `5`, `10`, `15`, `20`, `25`	Playback speed (frames per second)
`repeat`	`0` or `1`	Loop playback (1 = loop)
`delay_start`	seconds	Pause at start of loop
`delay_end`	seconds	Pause at end of loop

Example: Fully Customized Widget

<iframe 
  src="https://webcam.io/webcams/m7g61z/24-hours?embed=1&w=800&h=600&bc=000000&nc=1&fps=15&repeat=1&delay_end=3" 
  width="800" 
  height="600" 
  frameborder="0"
  scrolling="no">
</iframe>

This creates:

800×600 pixel player
Black background
No controls (clean look)
15 fps playback
Loops with 3-second pause at end

Latest Image Widget

Display the most recent webcam image — automatically updates with each new capture.

Image URLs

<!-- Standard resolution (640x480) -->
<img src="https://assets1.webcam.io/w/CAMERA-ID/latest.jpg" alt="Webcam view">

<!-- HD resolution (up to 1920x1080, requires paid plan) -->
<img src="https://assets1.webcam.io/w/CAMERA-ID/latest_hd.jpg" alt="Webcam HD view">

<!-- Small thumbnail (240x180) -->
<img src="https://assets1.webcam.io/w/CAMERA-ID/latest_sm.jpg" alt="Webcam thumbnail">

Auto-Refresh with JavaScript

<img id="webcam" src="https://assets1.webcam.io/w/CAMERA-ID/latest.jpg" alt="Live webcam">

<script>
// Refresh image every 60 seconds
setInterval(function() {
  var img = document.getElementById('webcam');
  img.src = img.src.split('?')[0] + '?t=' + new Date().getTime();
}, 60000);
</script>

Responsive Latest Image

<style>
.webcam-container {
  width: 100%;
  max-width: 800px;
}
.webcam-container img {
  width: 100%;
  height: auto;
}
</style>

<div class="webcam-container">
  <img src="https://assets1.webcam.io/w/CAMERA-ID/latest_hd.jpg" alt="Live webcam view">
</div>

Animated Preview (GIF)

A short animated GIF showing recent activity — great for thumbnails or social sharing.

<img src="https://assets1.webcam.io/w/CAMERA-ID/preview.gif" alt="Webcam preview">

Note

The preview GIF updates: - Every 5 minutes on paid plans - Every 1 hour on free plan

Responsive Design

Responsive Player (CSS)

<style>
.webcam-wrapper {
  position: relative;
  padding-bottom: 75%; /* 4:3 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.webcam-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="webcam-wrapper">
  <iframe 
    src="https://webcam.io/webcams/CAMERA-ID/24-hours?embed=1" 
    frameborder="0">
  </iframe>
</div>

Common Aspect Ratios

Aspect ratio CSS values
Aspect Ratio	padding-bottom	Use Case
4:3	`75%`	Standard webcam
16:9	`56.25%`	Widescreen
1:1	`100%`	Square

Bootstrap 5 Example

<div class="ratio ratio-4x3">
  <iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1"></iframe>
</div>

Multiple Widgets

You can embed multiple widgets on the same page — for example, different time ranges of the same camera:

<h3>Last Hour</h3>
<iframe src="https://webcam.io/webcams/CAMERA-ID/1-hour?embed=1" 
        width="400" height="300" frameborder="0"></iframe>

<h3>Last Sunrise</h3>
<iframe src="https://webcam.io/webcams/CAMERA-ID/sunrise?embed=1" 
        width="400" height="300" frameborder="0"></iframe>

<h3>Last 24 Hours</h3>
<iframe src="https://webcam.io/webcams/CAMERA-ID/24-hours?embed=1" 
        width="400" height="300" frameborder="0"></iframe>

Performance Note

Ranges longer than 2-3 days with small capture intervals (e.g., 15 seconds) may load slowly due to the large number of images. Consider using the week or month ranges sparingly.

WordPress Integration

Using HTML Block

Add a Custom HTML block
Paste your iframe code
Preview and publish

Using Shortcode (with plugin)

If you use a shortcode plugin:

// In your theme's functions.php
function webcam_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'range' => '24-hours',
        'width' => '640',
        'height' => '480'
    ), $atts);
    
    return sprintf(
        '<iframe src="https://webcam.io/webcams/%s/%s?embed=1" width="%s" height="%s" frameborder="0"></iframe>',
        esc_attr($atts['id']),
        esc_attr($atts['range']),
        esc_attr($atts['width']),
        esc_attr($atts['height'])
    );
}
add_shortcode('webcam', 'webcam_shortcode');

Usage:

[webcam id="m7g61z" range="24-hours" width="800" height="600"]

Styling Options

Hide Controls (Clean Look)

For paid plans, hide controls for a cleaner integration:

<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&nc=1" ...></iframe>

Custom Background Color

Match your website’s design:

<!-- Dark background -->
<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&bc=1a1a1a" ...></iframe>

<!-- Match website color (example) -->
<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&bc=f5f5f5" ...></iframe>

Custom Text Color

<iframe src="https://webcam.io/webcams/CAMERA-ID?embed=1&col=ffffff" ...></iframe>

Troubleshooting

Widget shows “Not Found” or blank

Causes:

Invalid Webcam ID
Camera is set to “Login required” privacy mode
Custom range is invalid or outside storage period

Solutions:

Verify Webcam ID in dashboard
Change privacy to “Do not list” (widgets still work)
Check custom range syntax

Widget loads slowly

Causes:

Long time range with small capture interval
Large number of images to load

Solutions:

Use shorter time ranges (24-hours instead of week)
Increase capture interval in webcam settings
Use fps parameter to reduce playback speed

Widget doesn’t display on HTTPS site

Solution:

All webcam.io URLs use HTTPS by default, so there should be no mixed content issues. Make sure your embed URL starts with https://.

Next Steps

Video Clips — Create shareable highlight clips
Text Overlays — Add timestamps and branding
Timer Settings — Control when footage is captured
Backups & Export — Export to YouTube or Dropbox