Embed video

Embedding a video from ImageKit allows you to integrate the video directly onto your platform without requiring an additional video player. With this capability, you can leverage:

  • Video transformations: Apply unique video transformations to embedded videos using adaptive bitrate streaming (ABS) to suit your platform's design needs.

  • Adaptive bitrate streaming: Benefit from comprehensive support for both HLS and MPEG-DASH. This feature automatically generates the necessary streaming representations and their related files.

  • Plug-and-Play: The embedded videos are ready for immediate playback, so additional integrations or players are unnecessary.

  • Smooth Playback: Viewers can expect a smooth start and consistent playback, ensuring a premium viewing experience.

  • Video Thumbnail: Showcase a preview image or thumbnail before the video begins to improve user engagement

Typically, the code to embed a video appears as follows:

<iframe width="560" height="315" src="https://imagekit.io/player/embed/demo/sample-video.mp4?thumbnail=https%3A%2F%2Fik.imagekit.io%2Fdemo%2Fsample-video.mp4%2Fik-thumbnail.jpg" title="ImageKit video player" frameBorder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen"> </iframe>

How do you generate and configure the Embed Video Code?

Embed video code can be generated for any video from the media library dashboard and the files detail page.

Head to either the media library dashboard or the file detail page of your chosen published video.

The embed feature is exclusive to published video files.

To generate the embed video code from the media library dashboard, hover over the lower right section of the video or right-click on the video file and select the "Embed" option.

In the Media Library, hover over the desired video or right-click on it, then select the "Embed" option. On the file detail page, the "Embed" option is conveniently located in the header section.

Upon selecting "Embed", a modal will appear with various configuration options, including the embed iframe code.

The following embed options are available:

Expiration time

The expiration time option is only available for private video files.

By default, embedded video is set to never expire. To specify an expiration date and time, deselect the checkbox.

Enable ABS

You have the option to enable adaptive bitrate streaming (ABS) and embed the videos using either HTTP Live Streaming (HLS) or Dynamic Adaptive Streaming over HTTP (MPEG-DASH) protocols. To do so, select the "Enable ABS" option and choose your preferred protocol and resolution from the dropdown menu.

A custom option is also available, which lets a user enter a transformation string. This can be used to add multiple supported video transformation parameters that are compatible with adaptive bitrate streaming-enabled video.

The transformation string must contain sr-<representations>transformation.

Additionally, named transformation can be incorporated as part of a custom transformation string by specifying tr:n-<named_transform>.

Last updated