function loadYoutube() {
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    tag.async = 1;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}

window.showVideo = function (div) {
    var id = div.getAttribute('data-id');
    var iframe = document.getElementById('ytplayer');
    var popup = document.getElementById('popup_youtube');
    popup.classList.add('active');

    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + id + '?autoplay=1');

    document.onkeydown = function(evt) {
        evt = evt || window.event;
        var isEscape = false;
        if ("key" in evt) {
            isEscape = (evt.key === "Escape" || evt.key === "Esc");
        } else {
            isEscape = (evt.keyCode === 27);
        }
        if (isEscape) {
            hideYoutubeModal();
        }
    };
}
var player
function showVideoApi(id) {
    var isUnMuted = false;
    player = new YT.Player('ytplayerapi', {
        videoId: id,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': function () {
                if (player && player.getPlayerState() === 3 && !isUnMuted) {
                    player.unMute();
                    player.playVideo();
                    isUnMuted = true;
                }
            }
        }
    });
}

function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}

function hideYoutubeModal() {
    document.getElementById('popup_youtube').classList.remove('active');
    document.getElementById('ytplayer').setAttribute('src', '');
    player = null;
    document.getElementById('ytplayerapidiv').innerHTML = '<div id="ytplayerapi"></div>';
}

function getDimensions(divId) {
    var div = document.getElementById(divId);
    if (div) {
        var id = div.getAttribute('data-id');
        let imgElement = div.getElementsByTagName('img')[0];
        var img = new Image();
        img.onload = function () {
            var width = img.width;
            if (width < 200) {
                imgElement.setAttribute('src', 'http://i3.ytimg.com/vi/' + id + '/hqdefault.jpg')
            }
        }
    }
}

window.onload = function checkThumbnails() {
    getDimensions('video-first-div');
    getDimensions('video-second-div');
    getDimensions('video-third-div');
    setTimeout(function () {
        loadYoutube();
    }, 2000);
}