| Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
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.
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>
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 - 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 - 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 - 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 - 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 - 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 - 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 - 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>
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>
Código de Incorporação, Personalizar, Player, Incorporado
Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
