| 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
