Add wrapper divs

This makes it so that the scratchpad and youtube plugins also insert a wrapper div around the iframes. This wrapper div is controlled with CSS in a change on webapp, which I'll also include here.

The iframe-wrapper will just ensure the inner iframe is centered (but not attempt to resize it, as programs have more specific sizes):

    .iframe-wrapper {
        iframe {
            display: block;
            margin: 10px auto;
        }
    }

The video-wrapper ensures the inside iframe fits the width in a 16:9 ratio:

    // http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
    .video-wrapper {
        margin-top: 10px;
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 25px;
        height: 0;

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }