Novidades100

CulináriaInternetDetonadosWallpapersPoesiasVideos

Código de Incorporação de Videos do YouTube

Veja abaixo alguns parâmetros da biblioteca do YouTube para códigos de incorporação de videos. As alterações estão em negrito para melhor percepção das alterações nos códigos.

Player Incorporado Html JavaScript

Inicialmente veja o código de um player incorporado sem nenhum parâmetro. Neste caso o player seguirá todos os padrões de parâmetros de players incorporados de videos do YouTube.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
});
}
</script>

Parâmetros de Player Incorporado

Autoplay

autoplay - Valores: 0 e 1. O valor padrão é 0. Definir o valor desse parâmetro como 1 faz com que o video seja automaticamente iniciado.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'autoplay': 1}, // Valor 1, o video é iniciado automaticamente.
});
}
</script>

controls

controls - Valores: 0 e 1. O padrão é 1, Exibe os controles do player. 0 oculta os controles.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'controls': 0}, // Valor 0, oculta os controles do player.
});
}
</script>

fs

fs - Valores: 0 e 1. O padrão é 1. Se você definir este valor desse parâmetro como 0 o botão de tela cheia ficará indisponível para os usuários.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'fs': 1}, // Valor 1, o botão de tela cheia ficará disponível.
});
}
</script>

cc_load_policy

cc_load_policy - O padrão é baseado na preferência do usuário. Definir o valor desse parâmetro como 1 fará com que as legendas ocultas sejam mostradas por padrão, independente de que o usuário as tenha desativado.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'cc_load_policy': 1}, // Valor 1, a legenda oculta será mostrada automaticamente.
});
}
</script>

playlist

playlist - Este parâmetro especifica uma lista de IDs de videos separados por vírgulas que serão reproduzidos no player.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'playlist': '5-wQfRR-UZs, i1sigjWBshY, sWNHn2Na7Oo, TYIFvZ2GeTM'}, // Lista de videos que serão reproduzidos pelo player.
});
}
</script>

color

color - Valores: red e white. O padrão é red. Definir esse parâmetro como white fará com que a opção modestbranding seja desativada. A barra de progresso do player será exibida na cor branca.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'color': 'white'}, // Valor white, a barra de progresso do player será na cor branca.
});
}
</script>

modestbranding

modestbranding - Ao definir o valor deste parâmetro como 1 o logotipo do YouTube não será exibido.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'modestbranding': 1}, // Valor 1, não exibe o logotipo do YouTube nos controles do player.
});
}
</script>

origin

origin - O uso desse parâmetro oferece mais segurança à API do IFrame. Para usar origin em incorporação de players, o parâmetro enablejsapi deve ser inserido no código e definido com o valor 1.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'enablejsapi': 1, 'origin': 'http://www.exemplo.com'}, // Valor http://www.examplo.com, url do site que faz a chamada da API do IFrame.
});
}
</script>

Vários Parâmetros

Você pode adicionar vários porâmetros ao mesmo tempo, desde que não hajam conflitos entre eles, como por exemplo color (com valor white) e modestbranding, que nesse caso ficaria desativado.
Veja no exemplo abaixo.

<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '720', // Pode ser configurado em % - por exemplo 100% para se adequar em qualquer largura de tela.
videoId: 'Tp1ZGCqqEuU',
playerVars: {'autoplay': 1, 'cc_load_policy': 1, 'fs': 1}, // Parâmetros: autoplay, cc_load_policy e fs.
});
}
</script>

Veja Mais Sobre Players Incorporado

Código de Incorporação, Personalizar, Player, Incorporado

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor| Política de Privacidade
Contato

Nosso site utiliza cookies e outras tecnologias para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades e outros serviços de acordo com seus interesses.