Turn.js Demo with Iframe: Fail

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/blasten/turn.js/master/turn.min.js"></script>

<style type="text/css">
body{
    background:#ccc;
}
#magazine {
    width:1152px;
    height:752px;
}
iframe { 
    width:550px;
    height:752px;
}
#magazine .turn-page{
    background-color:#blue;
    background-size:100% 100%;
}
</style>
</head>
<body>

<div id="magazine">
    <div><iframe src="http://amitgharat.wordpress.com/2012/06/23/writing-your-first-application-using-backbone-js/" frameborder="0"></iframe></div>
    <div style="background-image:url(http://placehold.it/1152x752);"></div>
    <div style="background-image:url(http://placehold.it/1152x752);"></div>
    <div style="background-image:url(http://placehold.it/1152x752);"></div>
    <div style="background-image:url(http://placehold.it/1152x752);"></div>
    <div style="background-image:url(http://placehold.it/1152x752);"></div>
</div>


<script type="text/javascript">

    $(window).ready(function() {
        $('#magazine').turn({
                            display: 'double',
                            acceleration: true,
                            gradients: !$.isTouch,
                            elevation:50,
                            when: {
                                turned: function(e, page) {
                                    /*console.log('Current view: ', $(this).turn('view'));*/
                                }
                            }
                        });
    });
    
    
    $(window).bind('keydown', function(e){
        
        if (e.keyCode==37)
            $('#magazine').turn('previous');
        else if (e.keyCode==39)
            $('#magazine').turn('next');
            
    });

</script>

</body>
</html>