Use the Stream Player

Last updated Jun 19, 2026 Cloudflare provides a customizable web player that can play both on-demand and live video, and requires zero additional engineering work.

To add the Stream Player to a web page, you can either:

  • Generate an embed code on the Stream page of the Cloudflare dashboard for a specific video or live input. Go to Videos ↗
  • Use the code example below, replacing <VIDEO_UID> with the video UID (or signed token) and <CODE> with the your unique customer code, which can be found in the Stream Dashboard.
<iframe
    src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
    style="border: none"
    height="720"
    width="1280"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
></iframe>

Stream player is also available as a React ↗︎ or Angular ↗︎ component.

Browser compatibility

Desktop

  • Chrome: version 88 or higher
  • Firefox: version 87 or higher
  • Edge: version 89 or higher
  • Safari: version 14 or higher
  • Opera: version 75 or higher

Note

Cloudflare Stream is not available on Chromium, as Chromium does not support H.264 videos.

Mobile

  • Chrome on Android: version 90
  • UC Browser on Android: version 12.12 or higher
  • Samsung Internet: version 13 or higher
  • Safari on iOS: version 13.4 or higher (speed selector supported when not in fullscreen)

Player Size

Fixed Dimensions

Changing the height and width attributes on the iframe will change the pixel value dimensions of the iframe displayed on the host page.

<iframe
    src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
    style="border: none"
    height="400"
    width="400"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
></iframe>

Responsive

To make an iframe responsive, it needs styles to enforce an aspect ratio by setting the iframe to position: absolute; and having it fill a container that uses a calculated padding-top percentage.

<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
    <iframe
        src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
        style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        allowfullscreen="true"
    ></iframe>
</div>

Basic Options

Player options are configured with querystring parameters in the iframe's src attribute. For example:

https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true

  • autoplay default: false

  • If the autoplay flag is included as a querystring parameter, the player will attempt to autoplay the video. If you don't want the video to autoplay, don't include the autoplay flag at all (instead of setting it to autoplay=false.) Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don't have unlimited Internet access before using this attribute.

    Caution

    Some browsers now prevent videos with audio from playing automatically. You may set muted to true to allow your videos to autoplay. For more information, refer to New <video> Policies for iOS ↗︎. - controls default: true - Shows video controls such as buttons for play/pause, volume controls. - defaultTextTrack - Will initialize the player with the specified language code's text track enabled. The value should be the BCP-47 language code that was used to upload the text track. If the specified language code has no captions available, the player will behave as though no language code had been provided.

    Caution

    This will only work once during initialization. Beyond that point the user has full control over their text track settings. - letterboxColor - Any valid CSS color value ↗︎ provided will be applied to the letterboxing/pillarboxing of the player's UI. This can be set to transparent to avoid letterboxing/pillarboxing when not in fullscreen mode.

    Note

    Note: Like all query string parameters, this value must be URI encoded. For example, the color value hsl(120 80% 95%) can be encoded using JavaScript's encodeURIComponent() function to hsl(120%2080%25%2095%25). - loop default: false - If enabled the player will automatically seek back to the start upon reaching the end of the video. - muted default: false - If set, the audio will be initially silenced. - preload default: none - This enumerated option is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may specify the value preload="auto" to preload the beginning of the video. Not including the option or using preload="metadata" will just load the metadata needed to start video playback when requested.

    Note

    The <video> element does not force the browser to follow the value of this option; it is a mere hint. Even though the preload="none" option is a valid HTML5 option, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligible. - poster defaults to the first frame of the video - A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn't specified, a thumbnail image of the video is shown.

    Note

    Note: Like all query string parameters, this value must be URI encoded. For example, the thumbnail at https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270 can be encoded using JavaScript's encodeURIComponent() function to https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D1s%26height%3D600. - primaryColor - Any valid CSS color value ↗︎ provided will be applied to certain elements of the player's UI.

    Note

    Note: Like all query string parameters, this value must be URI encoded. For example, the color value hsl(120 80% 95%) can be encoded using JavaScript's encodeURIComponent() function to hsl(120%2080%25%2095%25). - src - The video id from the video you've uploaded to Cloudflare Stream should be included here. - startTime - A timestamp that specifies the time when playback begins. If a plain number is used such as ?startTime=123, it will be interpreted as 123 seconds. More human readable timestamps can also be used, such as ?startTime=1h12m27s for 1 hour, 12 minutes, and 27 seconds. - ad-url - The Stream Player supports VAST Tags to insert ads such as prerolls. If you have a VAST tag URI, you can pass it to the Stream Player by setting the ad-url parameter. The URI must be encoded using a function like JavaScript's encodeURIComponent().

Debug Info

The Stream player Debug menu can be shown and hidden using the key combination Shift-D while the video is playing.

Live stream recording playback

After a live stream ends, a recording is automatically generated and available within 60 seconds. To ensure successful video viewing and playback, keep the following in mind:

  • If a live stream ends while a viewer is watching, viewers should wait 60 seconds and then reload the player to view the recording of the live stream.
  • After a live stream ends, you can check the status of the recording via the API. When the video state is ready, you can use one of the manifest URLs to stream the recording.

While the recording of the live stream is generating, the video may report as not-found or not-started.

Low-Latency HLS playback Beta

If a Live Input is enabled for the Low-Latency HLS beta, the Stream player will automatically play in low-latency mode if possible. Refer to Start a Live Stream to enable this option.

Was this helpful?

YesNo

On this page

Use the Stream Player - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/#page","headline":"Use the Stream Player","description":"Embed and customize the Cloudflare Stream Player for on-demand and live video playback.","url":"https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/","inLanguage":"en","image":"https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/og.png?v=0dcee57e88e5cbcd","dateModified":"2026-06-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: Control Cloudflare Stream video playback and listen for media events using the JavaScript SDK. title: Stream Player API image: https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/using-the-player-api/og.png?v=91c321adfe709640

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/stream/llms.txt
Use this file to discover all available pages before exploring further.