Incorporar Vídeos do YouTube em HTML - Guia Passo a Passo

Introdução

A tag HTML <embed> pode ser usada para incluir vários tipos de conteúdo, como imagens, vídeos e outras páginas web, em nossa página web. Neste laboratório, usaremos a tag HTML <embed> para adicionar um vídeo do YouTube a uma página web.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Estrutura do Documento HTML

Crie um novo arquivo chamado index.html.

Depois de criar seu arquivo index.html, adicione a estrutura básica para um documento HTML com um elemento head e body.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

Adicionar um vídeo usando a tag HTML `<embed>`

Para adicionar um vídeo à sua página web, você precisará usar o código de incorporação (embed) do YouTube.

Navegue até qualquer vídeo no YouTube.
Abaixo do vídeo, clique no botão "Compartilhar" e, em seguida, clique no botão "Incorporar" (Embed). Isso abrirá a janela Incorporar Vídeo (Embed Video).
Copie o código HTML que aparece na janela Incorporar Vídeo.
Cole o código no seu arquivo index.html, dentro do elemento <body>.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Definir a largura e altura do vídeo

Para evitar problemas de dimensionamento, é importante definir a largura e a altura do vídeo.

Adicione os atributos height e width à sua tag <embed>. O atributo width define a largura do vídeo, e o atributo height define sua altura.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Salve o arquivo index.html e abra-o em seu navegador web para verificar se o vídeo foi adicionado com sucesso.

Adicionar um fallback para navegadores não suportados

Nem todos os navegadores suportam a tag <embed>. Para garantir que sua página web ainda seja funcional para usuários com navegadores não suportados, você pode adicionar uma opção de fallback.

Adicione a tag <object> com parâmetros especificando o tipo de conteúdo incorporado e a URL do recurso a ser incorporado.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Seu navegador não suporta o elemento HTML5 Video. Por favor, atualize
    para um navegador moderno.
  </p>
</object>

Salve o arquivo index.html e abra-o em um navegador que não suporte a tag <embed>, como o Internet Explorer. Verifique se a opção de fallback funciona.

Resumo

Parabéns! Você aprendeu com sucesso como adicionar um vídeo a uma página web usando a tag HTML <embed>. Não se esqueça de verificar o suporte do navegador e usar a opção de fallback, se necessário.

Conteúdo Externo/Plugin HTML