metro4/less/embed.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.embed-container {
    position:relative;
    display: block;
    padding: 0;
    overflow:hidden;
    &::before {
        padding-top: percentage(9 / 16);
        display: block;
        content: "";
    }
}

.embed-container {
    iframe, object, embed, video, .embed-item {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        border: 0;
    }
}

.embed-container {
    &.size-21x9 {
        &::before {
            padding-top: percentage(9 / 21);
        }
    }
    &.size-16x9 {
        &::before {
            padding-top: percentage(9 / 16);
        }
    }
    &.size-4x3 {
        &::before {
            padding-top: percentage(3 / 4);
        }
    }
    &.size-1x1 {
        &::before {
            padding-top: percentage(1 / 1);
        }
    }
}