Cloudflare Docs
Stream
Cloudflare Docs
Stream
Search icon (depiction of a magnifying glass)
GitHub icon
Visit Stream on GitHub
Set theme to dark (⇧+D)

Using the Stream player

The Stream player can be placed on a web page in an iframe element with the video UID (or signed token ) replacing $VIDEOID in the example below.

<iframe
  src="https://iframe.videodelivery.net/$VIDEOID"
  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 components

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://iframe.videodelivery.net/$VIDEOID"
  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://iframe.videodelivery.net/$VIDEOID"
    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://iframe.videodelivery.net/$VIDEOID?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.

    here

    External link icon Open external link

.

  • 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.

  • 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.

  • 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.

  • 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.

  • primaryColor

    • Any valid CSS color value provided will be applied to certain elements of the player’s UI.

  • 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.