Solucionado
Como eu faço pra adicionar um vídeo na página para que ele apareça pausado, com blur quando está pausado?
Usando html, css e javascript.
Se possível dentro das "regras" do bootstrap.
Não estou conseguindo fazer isso, não achei nas aulas algo que explique
Agradeço desde já :D
Olás, Gustavo.
Caramba legal sua dúvida. Dei uma estudado na API do Youtube e consegui fazer :-)
O código ficou assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de embed do vídeo do youtube com blur</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
.video_esperando {
filter: blur(10px)
}
</style>
</head>
<body>
<div id="video" class="video_esperando"></div>
<script>
// Carregando a API de forma assíncrona para não deixar a página lenta
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Substituindo a div com o id video pelo iframe
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'dxdLph7JpLs',
events: {
'onStateChange': onChange
}
});
}
function onChange(event) {
console.log(event.target)
event.target.a.classList.remove('video_esperando')
}
</script>
</body>
</html>Dá uma olhada pra ver se te ajudar. Se tiver qualquer dúvida é só falar. :-)
Perfeito!
Agradeço muito a ajuda .
Só apareceu a seguinte duvida:
Quando eu aplico o código, o vídeo fica com um espaço bem pequeno em relação a uma imagem que está acima dele. Sabe como posso retirar esse espaço?
Não tenho ideia Gustavo. Você pode me mandar um print?