Iframe: Pseudo-Tela Cheia no iOS
Em dispositivos iOS, ao entrar no modo de tela cheia, o navegador usa a API nativa de tela cheia, que pode entrar em conflito com os controles do player do Kinescope. Este script resolve o problema: ele preserva os controles originais e funciona corretamente com marcas d’água dinâmicas.
Para quem é este artigo
- Desenvolvedores de aplicações web — precisam garantir o comportamento correto de tela cheia no iOS
- Proprietários de conteúdo com marcas d’água — precisam de exibição correta de marcas d’água dinâmicas no iOS
- Desenvolvedores frontend — precisam configurar o comportamento do player em dispositivos móveis
Quando você precisa do modo de pseudo-tela cheia no iOS
Use este código se:
- Marcas d’água dinâmicas no iOS — as marcas d’água devem ser exibidas corretamente no modo de tela cheia
- Preservando os controles do player — é importante que os controles originais do player permaneçam acessíveis
- Comportamento correto no iOS — é necessário comportamento correto de tela cheia em dispositivos iOS (Safari, Chrome para iOS)
Como o script funciona (3 passos)
- O player envia um evento — quando o usuário entra ou sai do modo de tela cheia, o player envia um evento
KINESCOPE_PLAYER_FULLSCREEN_CHANGE. - O script manipula o evento — salva os estilos atuais do iframe e aplica estilos de exibição em tela cheia (ou restaura os originais).
- Os controles são preservados — os controles originais do player permanecem acessíveis, as marcas d’água dinâmicas funcionam corretamente.
Agora vamos ver como configurar isso.
Configuração: passo 1 — adicionando o script à página
Coloque o script na página onde o player do Kinescope está incorporado, antes da tag de fechamento </body> ou na seção <head>. O script irá lidar automaticamente com todos os iframes do player do Kinescope na página.
Exemplo de posicionamento no HTML:
<!DOCTYPE html>
<html>
<head>
<title>Página com o Player do Kinescope</title>
</head>
<body>
<!-- Seu conteúdo -->
<iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" width="640" height="360" frameborder="0"></iframe>
<!-- Script para modo de tela cheia no iOS -->
<script>
// Código do script aqui
</script>
</body>
</html>
DOMContentLoaded para inicialização se colocar o script em <head>.Configuração: passo 2 — o código do script
Aqui está o código pronto para usar na sua página:
window.addEventListener('message', (event) => {
if (event.data.type && event.data.type === 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE') {
const frames = document.getElementsByTagName('iframe');
for (let i = 0; i < frames.length; i++) {
if (frames[i].contentWindow === event.source) {
if (event.data.value) {
// Salvar estilos originais
if (!frames[i].dataset.originalStyles) {
frames[i].dataset.originalStyles = frames[i].style.cssText;
}
// Aplicar estilos de tela cheia
frames[i].style.cssText = `
background: #000;
border: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
bottom: 0;
right: 0;
top: 0;
left: 0;`;
} else {
// Restaurar estilos antigos se foram salvos
if (frames[i].dataset.originalStyles) {
frames[i].style.cssText = frames[i].dataset.originalStyles;
delete frames[i].dataset.originalStyles;
} else {
frames[i].style.cssText = '';
}
}
break;
}
}
}
});
Como funciona (em detalhes)
Aqui está o que acontece quando um usuário abre a página com o player:
- O usuário abre a página — o script começa a rastrear eventos de todos os iframes na página.
- O usuário entra no modo de tela cheia — o player do Kinescope envia um evento
KINESCOPE_PLAYER_FULLSCREEN_CHANGEcomvalue: true. - O script manipula o evento — encontra o iframe correto pela fonte do evento, salva seus estilos atuais e aplica estilos de exibição em tela cheia.
- O usuário sai do modo de tela cheia — o player envia um evento com
value: false, o script restaura os estilos originais do iframe.
O evento KINESCOPE_PLAYER_FULLSCREEN_CHANGE
O player do Kinescope envia automaticamente este evento via window.postMessage quando:
- O usuário entra no modo de tela cheia (
event.data.value === true) - O usuário sai do modo de tela cheia (
event.data.value === false)
Formato do evento:
{
type: 'KINESCOPE_PLAYER_FULLSCREEN_CHANGE',
value: true // ou false
}
Gerenciamento de estilos do iframe
Ao entrar em tela cheia:
- Os estilos atuais do iframe são salvos em
dataset.originalStyles(para restaurar mais tarde) - São aplicados estilos de exibição em tela cheia:
- Posição fixa (
position: fixed) — o iframe permanece no lugar durante a rolagem - Tamanho de tela completo (
width: 100%,height: 100%) — ocupa toda a tela - Z-index alto (
z-index: 9999) — iframe acima dos outros elementos - Fundo preto (
background: #000) — para exibição correta
- Posição fixa (
Ao sair da tela cheia:
- Os estilos originais do iframe são restaurados a partir de
dataset.originalStyles - Os estilos salvos são excluídos do
dataset
Segurança
O script verifica que o evento se origina do iframe correto (event.source corresponde a iframe.contentWindow). Isso garante segurança ao trabalhar com múltiplos iframes na página — cada iframe é tratado de forma independente.
Como funciona:
1. Receber evento do iframe
2. Verificar: event.source === iframe.contentWindow
3. Se corresponder — manipular o evento
4. Se não corresponder — ignorar
Exemplos de uso
Exemplo 1: Integração simples
Se você tiver um player na página, o código acima funcionará imediatamente:
<iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" width="640" height="360" frameborder="0"></iframe>
<script>
// Código de manipulação de tela cheia
</script>
Exemplo 2: Múltiplos players na página
Se houver múltiplos players na página, o script irá lidar com cada um de forma independente:
<iframe src="https://kinescope.io/embed/video1" id="player1" width="640" height="360"></iframe>
<iframe src="https://kinescope.io/embed/video2" id="player2" width="640" height="360"></iframe>
<script>
// O código irá lidar com ambos os players de forma independente
</script>
Exemplo 3: Usando com frameworks
Se você usa React, Vue ou outro framework, coloque o script no componente que é montado após o carregamento do DOM:
React:
import { useEffect } from 'react';
function VideoPlayer() {
useEffect(() => {
// Código de manipulação de tela cheia
// ... (insira o código do passo 2)
}, []);
return <iframe src="https://kinescope.io/embed/pcFNnQGsD59CMKte2SQQaz" />;
}
Vue:
export default {
mounted() {
// Código de manipulação de tela cheia
// ... (insira o código do passo 2)
}
}
Pronto! Agora o modo de tela cheia funcionará corretamente em dispositivos iOS e os controles do player serão preservados.
O que fazer a seguir?
- Incorporação — incorporação básica do player
- IFrame Player API — controle programático do player
- Marcas d’água dinâmicas — configurando marcas d’água para proteção de conteúdo
Ainda tem dúvidas? Escreva para o chat de suporte na interface do Kinescope — nossos especialistas vão ajudar!