---
title: Dynamic JS (PlayKit) Embed
url: https://docs.kaltura.com/docs/embeddable-kaltura-products/kaltura-player/player-embed-dynamic-js
---

## Dynamic JS (PlayKit) Embed

Load the **PlayKit/Kaltura Player JS** for your PID/UiConfID, then call `KalturaPlayer.setup(...)` and `loadMedia(...)`.

> The code below assumes the same tokens as the [iframe embed](/docs/embeddable-kaltura-products/kaltura-player/player-embed-iframe).

```html
<!-- 1) Load player library for your PID/UiConfID -->
<script src="https://cdnapisec.kaltura.com/p/\{PARTNER_ID\}/embedPlaykitJs/uiconf_id/\{PLAYER_INSTANCE_ID\}/kaltura-player.js" type="text/javascript"></script>

<!-- 2) Player container -->
<div id="kplayer" style="max-width:100%;aspect-ratio:16/9;"></div>

<script>
  // 3) Setup with provider + playback; pass KS here when needed
  try {
    const player = KalturaPlayer.setup({
      targetId: 'kplayer',
      provider: {
        partnerId: \{PARTNER_ID\},
        uiConfId: \{PLAYER_INSTANCE_ID\},
        ks: '\{KALTURA_SESSION\}' // optional if content is public
        // env: { serviceUrl: 'https://www.kaltura.com' } // override if needed
      },
      playback: {
        autoplay: true,
        muted: true    
      }
    });

    // 4) Load media and optionally start at N seconds
    player.loadMedia(
      { entryId: '\{ENTRY_ID\}' },
      { seekFrom: \{CLIP_START_SECONDS\}, clipTo: \{CLIP_END_SECONDS\} }  
    );
    // Wait for the player to be ready (tracks loaded, safe to query state)
    player.ready().then(() => {
      console.log("player is ready!");
    });
  } catch (e) {
    console.error(e.message);
  }
```

### Full KalturaPlayer.setup() Config Object

The `KalturaPlayer.setup()` call accepts a configuration object with the following top-level sections:

```javascript
const player = KalturaPlayer.setup({
  targetId: 'kplayer',               // Required: DOM element ID for the player container
  log: { level: 'ERROR' },           // Log level: 'DEBUG', 'INFO', 'WARN', 'ERROR', 'OFF'

  provider: {
    partnerId: PARTNER_ID,           // Required: Kaltura partner ID (integer)
    uiConfId: UICONF_ID,            // Required: Player instance ID from KMC
    ks: 'KS_STRING',                // Optional: Kaltura Session for authenticated playback
    env: {
      serviceUrl: 'https://www.kaltura.com',  // API service URL (override for non-default regions)
      cdnUrl: 'https://cdnapisec.kaltura.com' // CDN URL (override for non-default regions)
    }
  },

  playback: {
    autoplay: true,                  // Auto-start playback (requires muted:true in most browsers)
    muted: false,                    // Start muted
    mutedAutoPlay: true,             // Fall back to muted autoplay if unmuted autoplay is blocked
    loop: false,                     // Loop playback when media ends
    startTime: 0,                    // Start playback at this position (seconds)
    volume: 1.0,                     // Initial volume (0.0 - 1.0)
    playsinline: true,               // Inline playback on mobile (no fullscreen takeover)
    preload: 'auto',                 // Preload behavior: 'auto', 'metadata', 'none'
    allowMutedAutoPlay: true,        // Allow muted autoplay as fallback
    streamPriority: [
      { engine: 'html5', format: 'hls' },
      { engine: 'html5', format: 'dash' },
      { engine: 'html5', format: 'progressive' }
    ]
  },

  ui: {
    disable: false,                  // Disable the entire UI
    css: '',                         // Custom CSS string injected into the player
    components: {
      seekbar: { disabled: false },  // Toggle individual UI components
      watermark: {
        img: 'https://example.com/logo.png',
        url: 'https://example.com',
        placement: 'top-left',       // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
        timeout: 0                   // Seconds to show watermark (0 = always)
      }
    }
  },

  plugins: {
    // Plugin configs — see PlayKit Plugin Ecosystem for details per plugin
  }
});
```

| Config Section | Purpose |
|---------------|---------|
| `targetId` | DOM element ID where the player renders. The element must exist before `setup()` is called. |
| `provider` | Kaltura account and authentication settings. `partnerId` and `uiConfId` are required. |
| `playback` | Playback behavior: autoplay, volume, looping, stream format priority. |
| `ui` | Player UI customization: disable controls, inject CSS, toggle components, add watermarks. |
| `plugins` | Plugin activation and configuration. Pass an empty object `{}` to enable with defaults, or provide config parameters. |
| `log` | Logging verbosity. Use `DEBUG` during development and `ERROR` in production. |

### loadMedia() Options

The `player.loadMedia()` method accepts two arguments: a media info object and an optional options object:

```javascript
player.loadMedia(
  { entryId: 'ENTRY_ID' },          // Required: entry to load
  {
    seekFrom: 30,                    // Start playback at 30 seconds (clipping start)
    clipTo: 120,                     // End playback at 120 seconds (clipping end)
    startTime: 30                    // Alternative to seekFrom for setting start position
  }
);
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `entryId` | string | Kaltura entry ID to load |
| `seekFrom` | number | Clip start position in seconds |
| `clipTo` | number | Clip end position in seconds |
| `startTime` | number | Initial playback position in seconds |