> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pnplayer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed script

> Drop a video into any page with one script tag and no JavaScript of your own.

If you only need to show a video and do not need to control it from your own code, use the embed script. It creates a responsive 16:9 iframe that loads the player for you.

<Note>
  The embed script lives alongside your player build at `https://cdn.pnplayer.com/<client>/<version>/embed.js`. Find the URL for your latest build on your builds page. For full control over options, controls and events, use the [JavaScript integration](./setup) instead.
</Note>

## Add the script

```html theme={null}
<script
  id="pnplayer-js-embed"
  src="https://cdn.pnplayer.com/<client>/<version>/embed.js"
  sources="https://stream.pnplayer.com/<video-id>/playlist.m3u8"
  theme="glassy"
  captions="en:English,hi:Hindi:srt"
  chapters="1"
></script>
```

The `id` must be exactly `pnplayer-js-embed`. The script reads its own attributes, builds the iframe and appends it to the end of the page body.

## Attributes

<ParamField path="sources" type="string" required>
  HLS playlist URL of the video to play
</ParamField>

<ParamField path="theme" type="string" default="default">
  Player theme: `default`, `netflix` or `glassy`
</ParamField>

<ParamField path="captions" type="string">
  Comma-separated list of caption tracks in the form `language:label:format`. Label and format are optional and default to the language code and `vtt`. Files are loaded from the `captions` folder next to the playlist, so `en:English` loads `https://stream.pnplayer.com/<video-id>/captions/en.vtt`.
</ParamField>

<ParamField path="chapters" type="string">
  Set to `1` to load `chapters.vtt` from the same folder as the playlist and show chapter markers on the timeline
</ParamField>

## Embed the iframe directly

The script is a convenience wrapper around `embed.html`. You can point an iframe at it yourself when you need to control placement or size.

```html theme={null}
<iframe
  src="https://cdn.pnplayer.com/<client>/<version>/embed.html?sources=https%3A%2F%2Fstream.pnplayer.com%2F%3Cvideo-id%3E%2Fplaylist.m3u8&captions=en%3AEnglish&chapters=1&theme=glassy"
  width="100%"
  height="100%"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture; remote-playback"
  allowfullscreen
></iframe>
```

Include `remote-playback` and `picture-in-picture` in the `allow` attribute, otherwise AirPlay and Picture-in-Picture do not work from inside the iframe.

### Query parameters

<ParamField path="sources" type="string" required>
  URL-encoded HLS playlist URL. Repeat the parameter to build a playlist.
</ParamField>

<ParamField path="captions" type="string">
  One caption track as `language:label:format`. Repeat the parameter for more tracks.
</ParamField>

<ParamField path="chapters" type="string">
  `1` to load `chapters.vtt`
</ParamField>

<ParamField path="autoplay" type="string" default="0">
  `1` to start playback automatically
</ParamField>

<ParamField path="muted" type="string" default="0">
  `1` to start muted
</ParamField>

<ParamField path="theme" type="string" default="default">
  `default`, `netflix` or `glassy`
</ParamField>

<Warning>
  The embed does not send an API key, so playback analytics are not recorded for embedded videos. Use the [JavaScript integration](./setup) with the `key` option if you need analytics.
</Warning>