HTML Código que impede você de sair de assistir um video em segundo plano

Lucas Chicarolli · 26 de janeiro de 2021

Olá, seguinte, eu gostaria de um código que impedisse de assistir um video em segundo plano, exemplo: você está eu outra pagina assistindo um video do youtube, e quando você troca para outra aba ou outro app o video para de ser reproduzido.

Agradeço desde já

Adriano_web · 26 de janeiro de 2021

@Lucas Chicarolli Então amigo, tem como, mas os navegadores por padrão bloqueiam o acesso e alteração de qualquer video que não estão na sua hospedagem por prevenção a ataques XSS nos servidores.

Abaixo formalizei um exemplo para você entender como é feito:

<html>
  <head>
    <title>Vídeo do YouTube</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe 
      src="https://www.youtube.com/watch?v=Kc8GNaED3Ok"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      id="frameMediaYt"
      width="560" 
      height="315"   
      frameborder="0">
    </iframe>
		
    <script>
      window.onblur = function() {
        document.getElementById("frameMediaYt").contentWindow.document.getElementsByTagName("video")[0].pause();
      }
    </script>
  </body>
</html>

Lucas Chicarolli · 26 de janeiro de 2021

@Adriano_web entendi, muito obrigado, só para ter certeza então a parte que faz o video pausar é

<script> window.onblur = function() {

             document.getElementById("frameMediaYt").contentWindow.document.getElementsByTagName("video")[0].pause();

             }

</script>

certo? É que ainda sou bem novo no mundo da programação

Adriano_web · 26 de janeiro de 2021

@Lucas Chicarolli Isso, a linguagem JavaScript se trabalha a interação do cliente com a página, CSS é a linguagem para estilização e HTML trabalha o conteúdo.