YouTube Miniaturas

by Tiago Agostinho

HTML

<div class="youtube" data-embed="H80nCKs9c2k"></div>
<div class="youtube" data-embed="WWZX8RWLxIk"></div>
<div class="youtube" data-embed="wWnBB-mZIvY"></div>

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));
    }