Imprimir este capítuloImprimir este capítulo

Repositório Códigos HTML

21. Vídeos

21.2. Vídeo Youtube em moldura

Você pode inserir o vídeo do youtube dentro de uma das molduras disponíveis para imagens no recurso INSERIR TEMPLATE  

Para isso, escolha o tamanho de imagem, insira na posição desejada no texto, abra a janela de edição de código <> e observe os seguintes itens:

Código

<div class="row-fluid">
<div class="span10 offset1 caixa-img"><img src="http://moodle.ead.ifsc.edu.br/theme/ifsc2018/blocos/img-padrao.png" class="img-responsive" />
<p class="legenda">Legenda:</p>
<p class="legenda">Fonte:</p>
</div>
</div>

Comentário

O trecho em verde garante a proporção em diferentes tamanhos de tela. A parte verde não deve ser alterada!

O trecho em azul indica o tamanho da imagem que você escolheu. Pode ser que esse trecho mude de acordo com a sua opção lá no botão inserir template.  A parte azul não deve ser alterada!

O trecho em amarelo é o espaço onde entraria uma imagem, mas, como queremos inserir um vídeo, precisamos substituir a parte em amarelo pelo código de incorporação do vídeo. Atenção: além do código de incorporação, inclua a DIV de responsividade, conforme indicado na página anterior.

O trecho em rosa é uma parte textual que fica abaixo da imagem/vídeo. Você pode complementar as informações ou pode optar por excluir, ficando apenas o texto.

Veja no exemplo abaixo como ficaria um código pronto:

Código

<div class="row-fluid">
<div class="span10 offset1 caixa-img"><div class="responsive-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/A-i1Dx9DnKM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<p class="legenda">Legenda:</p>
<p class="legenda">Fonte:</p>
</div>
</div>

O resultado do código acima é este:

Legenda:

Fonte: