Fullscreen video without black borders

Try adding to your CSS

.iframe-box {
    max-width: 1280px; /* video width */
    max-height: 720px; /* video height */
}

This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.

If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.

---

Further, afaik the following is not valid CSS, are you using a library or something?

#full-bg {
    .iframe-box {
        foo: bar;
    }
}

---

Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS

.fittobox {                /* give fit to box an aspect ratio */
    display: inline-block; /* let it be styled thusly */
    padding: 0;            /* get rid of pre-styling */
    margin: 0;
    width: 100%;           /* take up full width available */
    padding-top: 56.25%;   /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
    height: 0px;           /* don't want it to expand beyond padding */
    position: relative;    /* allow for absolute positioning of child elements */
}

.fittobox > iframe {
    position: absolute;    /* expand to fill */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}