Repositório Códigos HTML

22. Botão para libras e áudio recolhidos

O botão para áudio e libras recolhidos ficam 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> <a class="btn btn-info nolink" style="background-color: #707071!important; margin-left: 10px;" data-toggle="collapse" data-target="#audio1" target="_blank"><span style="color: #ffffff;"><i class="fas fa-volume-up"></i> <strong>Áudio</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 id="audio1" class="collapse" style="margin-top: 5px;">
<p>Versão em áudio: <a href="https://moodle.ead.ifsc.edu.br/brokenfile.php#/115595/user/draft/485918175/orienta%C3%A7%C3%B5es%20iniciais.mp3">Versão em áudio</a></p>
</div>
</div>

Comentário

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

A parte verde equivale ao botão de áudio. Se não houver áudio, remover toda a parte verde (inclusive a verde escura).

A parte verde escura é a o link para o arquivo de áudio.