Desafio: Um Site Com Vídeos

Exemplo: Estrutura Usada na Página Principal


<div class="video-grid">
    <a href="CAMINHO-DO-HTML/-SECUNDARIO-1.html?id=video1">
        <img src="https://img.youtube.com/vi/ID-DO-VIDEO/0.jpg" alt="Vídeo 1" width="300">
    </a>
    <a href="CAMINHO-DO-HTML/-SECUNDARIO-2.html?id=video2">
        <img src="https://img.youtube.com/vi/ID-DO-VIDEO/0.jpg" alt="Vídeo 2" width="300">
    </a>
    <a href="CAMINHO-DO-HTML/-SECUNDARIO-3.html?id=video3">
        <img src="https://img.youtube.com/vi/ID-DO-VIDEO/0.jpg" alt="Vídeo 3" width="300">
    </a>
    <a href="CAMINHO-DO-HTML/-SECUNDARIO-4.html?id=video4">
        <img src="https://img.youtube.com/vi/ID-DO-VIDEO/0.jpg" alt="Vídeo 4" width="300">
    </a>
</div>

Explicação Sobre a Estrutura Acima

Estrutura do HTML
- Usamos <div class="video-grid"> para criar uma grade de vídeos.
- Usamos
```
<a href="CAMINHO-DO-HTML/-SECUNDARIO-1.html?id=video1">
        
```
  para criar um link para a página secundária que contém o vídeo.
- Usamos
```
<img src="https://img.youtube.com/vi/ID-DO-VIDEO/0.jpg">
        
```
  para exibir a miniatura do vídeo.
- alt="Vídeo 1" → texto alternativo, importante para acessibilidade (leitores de tela).
- width="300" → define a largura da miniatura em pixels.
Funcionamento passo a passo
- A página principal mostra uma grade de miniaturas.
- Cada miniatura está dentro de um link <a>.
- Quando o usuário clica na imagem, ele é redirecionado para a página secundária correspondente, onde o vídeo é reproduzido dentro de um <iframe>.
- A classe ?id=video1 na URL pode ser usada para identificar qual vídeo carregar (útil se você usar JavaScript ou back-end no futuro).
Estilo e organização
- A classe .video-grid normalmente usa CSS Grid ou Flexbox para organizar os vídeos em linhas e colunas.
- Isso mantém a galeria visualmente organizada mesmo em telas diferentes.
- O CSS também pode adicionar espaçamento (gap), bordas, sombras e efeitos ao passar o mouse.
Por que isso é útil no aprendizado
- Permite aplicar conceitos de HTML: <div>, <a>, <img>.
- Introduz links internos e parâmetros na URL (?id=video1).
- Ensina estrutura de grade com CSS.
- Cria uma experiência prática de navegação entre páginas.

Exemplo: Estrutura Usada & Replicada nas Páginas Secundárias


<iframe id="video1"
src="https://youtube.com/embed/ID-DO-VIDEO"
class="active" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen>
</iframe>
<hr>
<h2><a href="../seu.html">⬅ Voltar à Galeria</a></h2>

Explicação da Estrutura Secundária Usada

Estrutura do iframe
- Usamos <iframe> para incorporar conteúdo externo dentro da página, neste caso, o player do YouTube.
- id="video1" → identifica o iframe, permitindo manipulação via CSS ou JavaScript.
- ```
src="https://www.youtube.com/embed/ID-DO-VIDEO"
            
```
  → define a URL do vídeo incorporado; o código final é o ID do vídeo no YouTube.
- ```
sandbox="allow-scripts allow-same-origin"
```
  → adiciona restrições de segurança, permitindo apenas scripts internos do YouTube e acesso ao próprio domínio.
- class="active" → define uma classe CSS para controlar estilo ou visibilidade do iframe.
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" → habilita recursos extras do player, como autoplay e picture-in-picture.
- allowfullscreen → permite que o vídeo seja exibido em tela cheia.
Funcionamento do iframe
- O iframe carrega o vídeo dentro da própria página, permitindo que o usuário assista sem sair do site.
- O botão do YouTube no player já permite abrir o vídeo diretamente no site do YouTube.
- A classe active pode ser usada para mostrar ou esconder o vídeo dinamicamente via CSS ou JavaScript.
Segurança e boas práticas
- Sempre use URLs confiáveis no src, como o embed oficial do YouTube.
- O atributo sandbox ajuda a proteger seu site contra scripts externos maliciosos.
- Não é necessário usar target="_blank" ou rel no iframe; essas propriedades só funcionam em links.

📘 Aula 24: Desafio - Um site com vídeos 📘

Galeria de vídeos

Exemplo: Estrutura Usada na Página Principal

Explicação Sobre a Estrutura Acima

Exemplo: Estrutura Usada & Replicada nas Páginas Secundárias

Explicação da Estrutura Secundária Usada

Créditos e Referências

Gustavo Guanabara