CSS

.banner-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.banner-container .banner-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

.banner-container img {
    margin: 0 auto;
}

Javascript

var layer_1 = function(options, env, time)
{
    var eventMessage = $('<div class="alert alert-info"><p><i class="mdi mdi-clock"></i> Layer added at: '+time+'<br>Disappear in 11 seconds</p></div>');
    player.env.shield.prepend(eventMessage);
    setTimeout( function()
    {
        eventMessage.remove();
    }, 11000);
}

var layer_2 = function(options, env, time)
{
    var eventMessage = $('<div class="alert alert-warning"><p><i class="mdi mdi-clock"></i> Layer added at: '+time+'<br>Disappear in 3 seconds</p></div>');
    player.env.shield.prepend(eventMessage);
    setTimeout( function()
    {
        eventMessage.remove();
    }, 3000);
}

var layer_3 = function(options, env, time)
{
    var bannerPos = $('<div class="banner-container hide"><div class="banner-cell"><a href="https://multizone.cz" target="_blank"><img src="/media/sample-banner.png" alt="~" class="img-responsive"></a></div></div>');
    var bannerCell = bannerPos.find('div.banner-cell');
    var banner = bannerPos.find('a');

    banner.on('click', function()
    {
        bannerPos.remove();
    });

    player.env.shield.after(bannerPos);

    w = player.env.shield.width();
    h = player.env.shield.height();
    bannerCell.css({
        'width': w+'px',
        'height': h+'px'
    });

    bannerPos.removeClass('hide');
}

var player = $('#video-0').warpPlayer({
    volume: 25,
    responsive: true,
    pauseOnClick: true,
    dimensions: [
        [960,540],
        [640,360],
    ],
    onTime: {
        '00:05': layer_1,
        '00:10': layer_2,
        '00:20': layer_3,
    }
});