Imprimir este capítuloImprimir este capítulo

Repositório Códigos HTML

23. Botão para video libras recolhido

O botão para libras recolhido fica da seguinte forma.

Veja a seguir o código HTML comentado.

Código

<div class="nolink" style="font-size: small; text-align: right;"><a class="btn btn-info" style="background-color: #707071!important;" data-toggle="collapse" data-target="#libras1" target="_blank"><span style="color: #ffffff;"><i class="fas fa-sign-language"></i> <strong>Libras</strong></span></a> 

<div id="libras1" class="collapse" style="margin-top: 5px;">
<div class="responsive-video"><iframe width="923" height="519" src="https://www.youtube.com/embed/I3c7SEPchzY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
</div>
</div>

Comentário

A parte amarela deve ser substituída pelo código de incorporação do vídeo no Youtube.

A parte azul é um identificador do botão. Caso utilize mais de um botão/seção na mesma página, alterar a numeração para cada botão feito. Por exemplo, o primeiro pode ser libras1/libras1.. o segundo, libras2/libras2. O importante é que seja o mesmo no botão e na div com vídeo (partes azuis). Se a mesma página tiver IDs iguais, o botão não vai saber qual abrir, por isso deve-se alterar o ID.