Skip to content
page-tests

CloudCannonVideo Tests

Video Playback

Local Videos

MP4 with Controls

MP4 Autoplay + Loop

YouTube

YouTube Standard

YouTube Autoplay

Vimeo

Vimeo Standard

Loom

Loom Video


Aspect Ratios

Standard Ratios

16:9 (Default)

4:3

1:1 (Square)

21:9 (Ultra-wide)

Custom Ratios

Custom 2:1

Custom 9:16 (Portrait)

Responsive

Full Width (resize to test)


Styling

Border Customization

Default Border

Custom Border

No Border

Centered Layout

Centered Video

Dark Mode

Toggle dark mode to test styling.

Dark Mode Test


Accessibility

Captions

Click CC button to toggle captions.

Single Caption Track

Multiple Caption Languages

ARIA Labels

Video with Custom ARIA Label

Keyboard Navigation

Test keyboard controls (Space, Arrow keys, F for fullscreen).

Keyboard Navigation Test


Performance

Lazy Loading

Open DevTools Network tab and scroll to see lazy loading.

Above Fold (Eager)

Scroll down ↓

Below Fold (Lazy)

Keep scrolling ↓

Far Below Fold (Lazy)

Preload Options

Preload None

Preload Metadata (Default)

Multiple Videos

Video 1

Video 2

Video 3


Error Handling

Missing Source

Video Source Missing

Please provide a valid video source URL or file path using the 'src' prop.

Invalid URL

Invalid Video URL

Need help with your Topsort integration?

Talk to us, the integrations engineering team.

Reach us via your dedicated Slack channel or via email at support@topsort.com.

If you're not a customer yet, book a demo with our sales team instead.