Como pode está funcionando os vídeos ocultados em sites

Como pode está funcionando os vídeos ocultados em sites

Por algum momento você já deve ter ouvido falar sobre sites que executam vídeos no plano de fundo do site. Isso é um prática totalmente ilegal, o Youtube não permite esse tipo de prática.
Anteriormente para fazer o vídeo “rodar” sem precisar clicar no vídeo precisava passar um argumento na url do vídeo, exemplo: “www.youtube.com/watch?v=Uk-87jzhVhs!&autoplay=1”. Como podemos ver, era uma própria “ferramenta” do Youtube, felizmente ele desativou, porém eu consegui uma forma de “burlar”. E ironicamente eu uso uma ferramenta do Youtube para fazer isso, o “YouTube Player API Reference for iframe Embeds”.
O método que estou utilizando funciona como um anúncio e depende que o usuário clicar nele. Após o clique o vídeo fica menor e permite usuário a navegar no site. Exemplo de um código:
<style> #player{width:100%; /*deixa a largura em 100% da pagina*/ height:100%; /*Deixa a altura em 100% da pagina*/ opacity:1; /**/ position:fixed; } </style> <div id="player"> </div> <script> //Esse código configura a API do Youtube var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Essa função cria o iframe (Player do Youtube) var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { videoId: 'PejUkwietYI', //id do vídeo events: { 'onReady': onPlayerReady, //Quando o vídeo estiver pronto ele chama a função "onPlayerReady" 'onStateChange': onPlayerStateChange } }); } // É chamada quando o video estiver pronto function onPlayerReady(event) { event.target.playVideo(); } var done = false; //Executa toda vez que o vídeo estiver executando function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { //player.mute(); Desabilita o som do vídeo document.getElementById('player').style.width = "100px";//Após o vídeo ser executado, o tamanho a largura do vídeo fica em 100px document.getElementById('player').style.height = "100px";//Após o vídeo ser executado, o tamanho a altura do vídeo fica em 100px document.getElementById('player').style.display = "none";//Some com vídeo praticamente, você não consegue clica nele, mas ele continua "rodando". done = true; } } </script> Exemplo de um blog: Link

Exemplo de um blog com opacidade 0,3: Link


Exemplo de um blog nocivo com apenas o som ligado: Link
Lembrando que não mudei a opacidade, então é por isso que nós conseguimos ver o vídeo, caso a opacidade estivesse em 0, ai não conseguiremos ver sem alterar o código. Então ressaltando que caso você esteja clicando em algo invisível, tome muito cuidado. Deixo um ponto importante que eu repudio atitudes de sites que praticam isso, por esse motivo vou trazer uma ferramenta simples que consegue “ver” se há alguma coisa “rodando” no fundo.