At a glance
- The first painted frame of a video can be an LCP candidate, so use a poster or optimize the first frame.
- preload="none" downloads nothing until play; preload="metadata" fetches only basic details.
- Muted, looping video files are far more efficient than animated GIF previews.
- Live streams often run inside a provider's frame; load that frame only when the player opens the table.
Three kinds of video on casino pages
- Preview loops on lobby tiles and banners: short, muted clips that show a game or table.
- Promotional video in a hero slot.
- Live dealer streams, usually supplied by a live casino provider inside an iframe with its own player and controls. Some providers use WebRTC, which RFC 8825 describes as "a protocol suite intended for use with real-time applications that can be deployed in browsers"; others use segmented streaming. Ask your provider which, because it changes how the stream behaves on weak connections.
Posters and preload
web.dev's video guide explains that the poster attribute "hints to users what the video contents may be before playback is initiated", and that once painted, the first frame of a video can count as a Largest Contentful Paint candidate. If a hero video sits in the first view, its poster is effectively your LCP image: size it, compress it and give it priority like any other LCP image.
The preload attribute controls what the browser downloads before playback. web.dev notes that preload="none" means none of the video should be preloaded and preload="metadata" "only fetches video metadata". For lobby previews below the fold, combine preload="none" with starting playback only when the tile is in view.
Replace GIF previews
web.dev describes video as a "replacement for animated GIFs" because it is much more efficient than animated image formats. A muted, looping MP4 or WebM with a poster usually weighs far less than the same animation as a GIF. Respect the reduced motion setting: if prefers-reduced-motion is set to reduce, show the poster and do not autoplay.
Live streams: load on demand
A live table frame brings video, a player script and its own network connections. Loading it in the lobby for players who never open the table costs every visitor. A pattern that works well:
- Show a static card for each table with a poster, the table name and a "Join table" button.
- Load the provider's frame when the player opens the table page or taps the button.
- Reserve the frame's space with a fixed aspect ratio, so the page does not shift when the frame appears.
- Start the stream muted where the provider allows, with visible controls.
Because the stream and the page share the player's connection, a running stream can slow other downloads on the same page. Defer non-essential requests on live table pages.
Accessibility
WCAG 2.2 success criterion 2.2.2 requires a way to pause, stop or hide moving content that starts automatically and lasts more than five seconds, when it runs alongside other content. Autoplaying previews in a lobby fall under this. Provide a visible pause control or start previews only on hover or focus.
Questions
Does a live stream count toward LCP?
Video elements in the page can be LCP candidates through their first frame or poster. A stream inside a cross-origin frame is measured differently, so check the LCP element in a trace.
Should lobby previews autoplay?
Only muted, only when in view, with a pause control and respect for reduced motion. Otherwise show the poster.
Can we preload the live table frame to make joining faster?
Only for the one table a player is very likely to open next. Preloading many frames spends bandwidth and memory for every visitor.
Sources
- web.dev, Video performance, last updated April 2, 2026.
- IETF, RFC 8825: Overview: Real-Time Protocols for Browser-Based Applications, January 2021.
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, October 5, 2023.
- MDN Web Docs, prefers-reduced-motion, no date checked.
- web.dev, Optimize Largest Contentful Paint, last updated March 31, 2025.