Repositório Códigos HTML
21. Vídeos
21.3. Vídeo YouTube em caixa de imagem, com texto antes e depois
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:
<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 style="clear: both;">
O trecho em verde garante a proporção em diferentes tamanhos de tela e que o texto ao final, após a caixa, não seja inserido dentro do box de imagem, mas seja digitado fora da caixa. 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:
<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 style="clear: both;">
O resultado do código acima é este:
Legenda:
Fonte: