Embed Script

Embed MediaKit videos on any website with a single script tag.

Script Tag Embed

Add this to any HTML page:

html

<script
  src="https://mediakit.gritcms.com/mediakit-embed.js"
  data-id="1"
></script>

The script automatically:

Fetches playback info from the API
Creates a responsive video player
Initializes HLS.js for adaptive streaming
Falls back to native HLS on Safari or MP4 on older browsers
Tracks play analytics automatically

Iframe Embed

For sandboxed embedding:

html

<iframe
  src="https://mediakit.gritcms.com/embed/1"
  width="640"
  height="360"
  frameborder="0"
  allowfullscreen
></iframe>

Script Tag Options

Attribute	Description
data-id	Video asset ID (required)
data-autoplay	Auto-start playback ("true"/"false")
data-muted	Start muted ("true"/"false")
data-api	Custom API URL override

Responsive Sizing

Wrap the embed in a container for responsive sizing:

html

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <script
    src="https://mediakit.gritcms.com/mediakit-embed.js"
    data-id="1"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  ></script>
</div>

WordPress / Ghost / CMS

Simply paste the script tag into any HTML block in your CMS. It works with WordPress, Ghost, Squarespace, Notion, and any platform that allows custom HTML.

← React SDK API Keys