# Incorporação simples com iframe


A maneira mais simples de adicionar o player é inserir um `<iframe>` com a URL de um vídeo ou playlist. Você pode copiar o código no painel do Kinescope ou criá-lo manualmente.

## Código básico

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

Substitua `VIDEO_ID` pelo ID do seu vídeo ou da sua playlist.

> **Внимание:**

O atributo `allow` é obrigatório. Sem ele, reprodução automática, tela cheia, Picture-in-Picture e DRM podem não funcionar.



> **Внимание:**

Evite usar o atributo `sandbox`. Se precisar dele, especifique:

`allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation`



## Parâmetros de URL

Adicione parâmetros ao fim da URL para configurar o comportamento do player. Comece com `?` e separe vários valores com `&`:

`https://kinescope.io/embed/VIDEO_ID?autoplay=1&loop=1`

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID?parameter=value"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

### Parâmetros compatíveis

<table class="table-params">
<thead>
<tr>
<th>Parâmetro</th>
<th>Valores</th>
<th>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code>autofocus</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Move o foco para o player.</td>
</tr>
<tr>
<td><strong><code>autoplay</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Inicia o vídeo automaticamente após o carregamento do player. Se a reprodução com som falhar, o player tenta iniciar sem som.</td>
</tr>
<tr>
<td><strong><code>autopause</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Pausa quando outro player da página inicia a reprodução.</td>
</tr>
<tr>
<td><strong><code>muted</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Desativa o som do player.</td>
</tr>
<tr>
<td><strong><code>loop</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Repete o vídeo.</td>
</tr>
<tr>
<td><strong><code>playsinline</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Reproduz o vídeo em dispositivos móveis sem entrar automaticamente no modo de tela cheia.</td>
</tr>
<tr>
<td><strong><code>preload</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Pré-carrega o vídeo. <code>false</code> carrega somente a capa. <code>true</code> carrega antecipadamente os dados necessários.</td>
</tr>
<tr>
<td><strong><code>background</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Oculta todos os controles e define <code>autoplay</code>, <code>muted</code> e <code>loop</code> como <code>true</code>.</td>
</tr>
<tr>
<td><strong><code>t</code></strong></td>
<td><code>number</code></td>
<td>Tempo em segundos no qual a reprodução do vídeo começa.</td>
</tr>
<tr>
<td><strong><code>seek</code></strong></td>
<td><code>number</code></td>
<td>Tempo em segundos no qual a reprodução começa. O início do manifesto é cortado.</td>
</tr>
<tr>
<td><strong><code>duration</code></strong></td>
<td><code>number</code></td>
<td>Duração do trecho em segundos. Use com <code>seek</code> para exibir apenas parte do vídeo.</td>
</tr>
<tr>
<td><strong><code>quality</code></strong></td>
<td><a href="/player-docs/optimization/#qualidade-do-video"><code>VideoQuality</code></a></td>
<td>Qualidade do vídeo: <code>auto</code> ou altura em pixels, como <code>720</code> ou <code>1080</code>. Consulte <a href="/player-docs/optimization/#qualidade-do-video">Otimização</a>.</td>
</tr>
<tr>
<td><strong><code>audiotrack</code></strong></td>
<td><code>string</code></td>
<td>Ativa a faixa de áudio no idioma especificado. <code>@experimental</code></td>
</tr>
<tr>
<td><strong><code>texttrack</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code> / <code>string</code></td>
<td>Ativa as legendas. <code>true</code> seleciona o idioma do navegador, depois o idioma do player e, por fim, a primeira faixa. <code>string</code> seleciona a faixa no idioma especificado.</td>
</tr>
<tr>
<td><strong><code>transparent</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Usa um fundo transparente no player.</td>
</tr>
<tr>
<td><strong><code>title</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Exibe o título e o subtítulo.</td>
</tr>
<tr>
<td><strong><code>controls</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Exibe os controles do player.</td>
</tr>
<tr>
<td><strong><code>no_poster</code></strong></td>
<td><code>1</code> / <code>0</code></td>
<td>Oculta a capa.</td>
</tr>
<tr>
<td><strong><code>keyboard</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Controla o player pelo teclado.</td>
</tr>
<tr>
<td><strong><code>speedbtn</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Exibe o botão de velocidade de reprodução.</td>
</tr>
<tr>
<td><strong><code>notifications</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Exibe notificações no player sobre problemas de rede, erros, Chromecast e outros eventos. <code>@experimental</code></td>
</tr>
<tr>
<td><strong><code>watermark</code></strong></td>
<td><code>string</code></td>
<td>Texto da marca d'água. Ative esse recurso no painel. Caso contrário, o player ignora o parâmetro.</td>
</tr>
<tr>
<td><strong><code>dnt</code></strong></td>
<td><code>true</code> / <code>false</code> / <code>1</code> / <code>0</code></td>
<td>Desativa o rastreamento da atividade do usuário e as métricas.</td>
</tr>
<tr>
<td><strong><code>drmauthtoken</code></strong></td>
<td><code>string</code></td>
<td>Token de autorização personalizado para solicitações de licença. Consulte <a href="/content-protection/drm-encryption/">Criptografia DRM</a>.</td>
</tr>
<tr>
<td><strong><code>adtagurl</code></strong></td>
<td><code>string</code></td>
<td>URL da tag de publicidade. Consulte <a href="/player-docs/advertising/">Publicidade</a>.</td>
</tr>
<tr>
<td><strong><code>externalid</code></strong></td>
<td><code>string</code></td>
<td>Identificador personalizado enviado com as métricas.</td>
</tr>
</tbody>
</table>

> **Информация:**

Você pode usar `1` e `0` no lugar de `true` e `false`. Por exemplo, `?autoplay=true` e `?autoplay=1` são equivalentes. Um parâmetro sem valor, como `?autoplay`, é interpretado como `true`.



> **Внимание:**

Os parâmetros `seek` e `duration` não funcionam com vídeos protegidos por DRM. Você pode usá-los com URLs de vídeo e manifestos HLS.



Este exemplo reproduz um trecho de 30 segundos a partir do segundo 60:

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID?seek=60&duration=30"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

## Carregamento adiado

Quando o `<iframe>` fica fora da área visível, por exemplo, perto do fim da página, você pode adiar o carregamento. Isso ajuda a abrir a página mais rápido:

```html
<iframe loading="lazy" ...></iframe>
```

Consulte [Otimização](https://docs-br.kinescope.com/player-docs/optimization/) para saber mais.

## Exemplos de incorporação

### Tamanho responsivo do player {#responsive_example}

O player se adapta à largura do contêiner. Coloque o código em seu contêiner e ajuste os estilos, se necessário.

```html
<style>
  .kin-player-embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .kin-player-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
<div class="kin-player-embed-container">
  <iframe
    src="https://kinescope.io/embed/VIDEO_ID"
    allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  ></iframe>
</div>
```

### Tamanho fixo do vídeo {#fixed_example}

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID"
  width="640"
  height="360"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

## Próximos passos

- [Otimização](https://docs-br.kinescope.com/player-docs/optimization/) — reprodução automática na área visível e limites de qualidade
- [IFrame API](https://docs-br.kinescope.com/player-docs/embedding/iframe-api/) — controle o player com JavaScript
- [Incorporação pelo painel](https://docs-br.kinescope.com/video-player/embedding/) — código gerado pela interface, incorporações compatíveis com LLM e modelos (`player_id`)