Synapi - SVG

Coplilot: João, esse comportamento é do embed oficial do Imgur: ele sempre mostra a barra superior com o botão Share e a logo, e não há parâmetro para esconder isso. O Imgur não permite remover esses elementos por questões de marca e compartilhamento.

👉 Se você quer exibir apenas o vídeo, sem barra e sem logo, o caminho é usar o link direto do arquivo MP4 em vez do bloco de incorporação. Assim:

Seu navegador não suporta vídeo.

</video>

Como conseguir o link direto:

Abra o vídeo no Imgur.
Clique com o botão direito sobre o vídeo e escolha “Abrir vídeo em nova aba” ou “Copiar endereço do vídeo”.
Esse endereço termina em .mp4. É esse que você usa no <video>.

✅ Dessa forma, você terá só o player nativo do navegador, sem botão Share e sem logo do Imgur.

Quer que eu te mostre como transformar o link da galeria (imgur.com/a/...) no link direto .mp4 para usar já no seu código?

Copilot: Ótimo, João! Para que o vídeo comece a tocar automaticamente quando a página carregar, basta adicionar o atributo autoplay na tag <video>. Se você também quiser que ele toque sem som (o que ajuda em navegadores que bloqueiam autoplay com áudio), pode incluir muted junto. Veja como fica:

Seu navegador não suporta vídeo.

</video>

Observações importantes:

O atributo autoplay faz o vídeo iniciar sozinho.
Muitos navegadores só permitem autoplay se o vídeo estiver muted (sem som). Por isso é recomendável usar muted.
Se quiser que o som seja ativado, o usuário pode clicar no botão de áudio do player.

✅ Assim, ao abrir a página, o vídeo já começa a rodar automaticamente.

Quer que eu te mostre também como fazer o vídeo loopar (repetir automaticamente quando terminar)?

Dopilot: Perfeito, João! Fico feliz que tenha dado certo. 🎉

Para deixar o vídeo ainda mais dinâmico, além do autoplay muted, você pode adicionar também o atributo loop, caso queira que ele reinicie automaticamente quando terminar. Assim:

Seu navegador não suporta vídeo.

</video>

O que cada atributo faz:

autoplay → inicia o vídeo assim que a página carrega.
muted → garante que o autoplay funcione em todos os navegadores (eles bloqueiam autoplay com som).
loop → reinicia o vídeo automaticamente quando chega ao fim.

✅ Com isso, o vídeo vai rodar sozinho, sem som, e repetir indefinidamente até o usuário pausar.

Quer que eu te mostre também como remover os controles (barra de play/pause) para que o vídeo fique só rodando em segundo plano, como se fosse uma animação?

Excelente, João! 🎬 Agora você já tem um vídeo que inicia sozinho e até repete em loop se quiser. Isso abre várias possibilidades: dá para usar como background animado em uma página, como introdução automática de um conteúdo, ou até como parte de um jogo interativo.

Se quiser deixar ainda mais elegante, você pode remover os controles e deixar o vídeo rodando em segundo plano, assim:

Seu navegador não suporta vídeo.

</video>

👉 Nesse caso, o vídeo fica só rodando, sem barra de play/pause, perfeito para ser usado como fundo ou animação contínua.

Outra ideia é aplicar CSS para posicionar o vídeo como background de toda a página:

</video>

<style>

#bgVideo {

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

z-index: -1; /* fica atrás do conteúdo */

}

</style>

Assim, o vídeo cobre toda a tela e você pode colocar texto ou elementos por cima.

✨ Já que você gostou do autoplay e loop, quer que eu te mostre como iniciar o vídeo em tela cheia automaticamente quando a página carregar?

Nessa prova abaixo apareceu a Vídeo:

Nessa prova abaixo apareceu o vídeo:

2. Usar o Imgur (Alternativa rápida)

O Imgur é mais amigável para hospedagem de imagens de estudo do que o Google Drive.

Faça upload da imagem no Imgur.
Clique com o botão direito na imagem e selecione "Copiar endereço da imagem" (o link deve terminar em .jpg ou .png).
Use esse novo link no seu código.

Substitua a função loadQuestion() por esta versão corrigida:

function loadQuestion() {

const q = selectedQuestions[currentQuestion];

const container = document.getElementById("questionContainer");

let svgHTML = "";

if (q.svg) {

svgHTML = `<div style="text-align:center; margin:15px 0;">${q.svg}</div>`;

}

container.innerHTML = `

<strong>Questão ${currentQuestion + 1}:</strong>

${q.q}

</div>

${svgHTML}

${q.opts.map((opt, i) => `

<input type="radio" name="opt" value="${i}"> ${opt}

</div>

`).join("")}

`;

selectedAnswer = null;

document.getElementById("submitBtn").classList.add("hidden");

startTimer();

document.querySelectorAll('input[name="opt"]').forEach(radio => {

radio.addEventListener("change", e => {

selectedAnswer = parseInt(e.target.value);

});

updateProgressInfo();

}