Media Elements

Adicionar um GIF

GIF significa Graphic Interchange Format, mas tudo que você precisa saber é que é apenas outro tipo de arquivo de imagem. A única diferença é que o arquivo contém muitas imagens. Quando exibidas no navegador, as imagens são reproduzidas em sequência, semelhante aos frames de um filme. Pense nisso como um daqueles flip books que parecem ter uma imagem animada quando você o vira.

Adicione um vídeo

Além de texto e imagens, uma das coisas mais comuns que gostamos de adicionar aos sites são os vídeos. Os arquivos de vídeo são muito grandes, então é melhor usar um serviço para enviar e exibir o vídeo, como o YouTube. Depois de carregado no YouTube, como podemos reproduzi-lo em nosso site? Usamos uma tag especial chamada iframe

Iframes exibem HTML de outros sites dentro do nosso. É como uma janela, onde você pode ver o que está acontecendo lá fora na internet, de dentro do site atual. Este processo é chamado de incorporação.

Por exemplo, o vídeo abaixo é um iframe do Instragram de Benji:

Muitos sites oferecem iframes para incorporar ao seu site. Por exemplo, veja como você encontra o código iframe para um vídeo do YouTube:

Aqui está um exemplo de iframe

Copie o seguinte código: <iframe width="560" height="315" src="https://www.youtube.com/embed/lQsqEBSGdyc" frameborder="0" permitir="acelerômetro; reprodução automática; mídia criptografada; giroscópio; imagem- na imagem" permitir tela cheia> </iframe>

Cole-o na sua Code Pen e ficará assim: