Javascript: Usando addEventListener() para gerar miniaturas de vídeos do YouTube

A ideia do post é gerar miniaturas de vídeos do YouTube.

Segue código completo com comentários para facilitar a compreensão.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Javascript - addEventListener()</title>
</head>
<body>
<div class="youtube" data-embed="H80nCKs9c2k"></div>
<div class="youtube" data-embed="WWZX8RWLxIk"></div>
<div class="youtube" data-embed="wWnBB-mZIvY"></div>
</body>
<script type="text/javascript">
    function redimensiona(i) {
        window.setTimeout(function () {
            var larguraMaxima = 100; // Largura máxima permitida
            var alturaMaxima = 52;    // Altura máxima permitida
            var proporcaoMaxima = alturaMaxima / larguraMaxima;
 
            var larguraImagem = imagens[i].width;    // Largura da imagem
            var alturaImagem = imagens[i].height;  // Altura da imagem
            var proporcaoImagem = alturaImagem / larguraImagem;
 
            if (proporcaoImagem > proporcaoMaxima) {
                proporcao = larguraMaxima / larguraImagem;   // Proporção para dimensionar a imagem
                imagens[i].width = larguraMaxima; // Definindo nova largura
                imagens[i].height = (alturaImagem * proporcao); // Definindo a altura com base na proporção
            }
            else {
                proporcao = alturaMaxima / alturaImagem; // Proporção para dimensionar a imagem
                imagens[i].height = alturaMaxima;   // Definindo nova altura
                imagens[i].width = (larguraImagem * proporcao);  // Definindo a largura com base na proporção
            }
            youtube[i].appendChild(imagens[i]);
        }, 200);
    }
 
    // nodelist
    var youtube = document.querySelectorAll(".youtube");
    // array
    var imagens = [];
    // loop
    for (var j = 0; j < youtube.length; j++) {
        // miniatura do vídeo youtube
        var imagemYoutube = "https://img.youtube.com/vi/" + youtube[j].dataset.embed + "/sddefault.jpg";
        //
        imagens[j] = new Image();
        imagens[j].src = imagemYoutube;
        //
        imagens[j].addEventListener("load", redimensiona(j));
    }
</script>
</html>

Qualquer dúvida deixe nos comentários.
Até+

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *