.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 56.25%;
    content: "";
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* unknown ration variation */
.unknown-ratio-container > * {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


.lazyload, .lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    -webkit-transition: opacity 600ms;
    transition: opacity 600ms;
}
iframe.lazyload, iframe.lazyloading, video.lazyload, video.lazyloading {
    opacity: 1;
    background: url('icons/loading.gif') no-repeat 50% 50%;
}