toggle fullscreen on iframe

HTML

<ul id="list">
    <li>
        <div>
            <iframe src="http://time.is/"></iframe>
        </div>
    </li>
        <li>
    <div>
            <iframe src="http://google.com/"></iframe>
    </div>
    </li>
</ul>

CSS

#list {
    overflow:auto;
}
#list li {
    float:left;
    margin-right:10px;
}
div {
    width:200px;
    height:200px;
    border:1px solid gray;
    position:relative;
}
iframe {
    /* width:100%;
    height:100%; */
    width: 1280px;
    height: 786px;
    border: 1px solid black display:block;
    -moz-transform: scale(0.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.25);
    -webkit-transform-origin: 0 0;
}
span.togglebutton {
    position:absolute;
    left:0;
    top:0;
    background-color:black;
    padding:3px;
    color:white;
}
div.maximized {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-transform: scale(4);
    -webkit-transform-origin: 0 0;
    border:0 none;
    z-index:9;
}

JavaScript

var colors = ['#f00', '#000'];
$('#list div').each(function (id) {
    $(this).append([
    	'<span class="togglebutton" style="',
      'background: ' + colors[id] + '!important;',
      '">Toggle</span>',
    ].join(''));
});

$("span.togglebutton").click(function () {
    $(this).closest("li").children("div").toggleClass("maximized");
});