Vídeos responsivos no Moodle

Em algumas situações, os vídeos inseridos na plataforma Moodle ou em um site qualquer, sejam eles do YouTube ou Vimeo, não ficam responsivos.

Quando você acessa de dispositivos móveis ou  outra tecnologia que não seja o computador, o vídeo fica cortado ou, as vezes, inacessível.

A solução para corrigir o problema é inserir um CSS no seu tema Moodle ou dentro do arquivo .css do seu site e, logo depois, embutir os vídeos dentro de uma DIV com as definições da folha de estilo definida.

Vejamos como seria isso para o Moodle (Testado na versão 3.8):

1. Vá em Administração do site, depois em Aparência, clique no tema atual do seu moodle.
2. Clique em configurações avançadas e em SCSS puro insira o código abaixo:

.embed-container {
position: relative;
padding-bottom: 56.25%;
max-width: 100%;
height: auto;
overflow: hidden;
margin-top: 30px;
margin-bottom: 30px;
}

.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
width: 100%;
height: 100%;
border: none;
}


3. Copie código de embed do vídeo desejado e cole no seu post ou página onde deseja embutir o vídeo, dentro da div, conforme o modelo abaixo:

        <div class="embed-container">
                INSERIR AQUI O EMBED COPIADO DO VÍDEO

        </div>

Pronto! Pode acontecer de necessitar de alguns ajustes de css em sites específicos. Aí você vai testando até ficar satisfeito. Mas, de forma geral, siga esses passos que o resultado é satisfatório.

Pra esse tutorial, tive ajuda aqui e aqui.