iOS device container with iFRAME

by tonytlwu

HTML

<pre id="debug">&nbsp;</pre>
<input type="range" step="0.01" min="0.25" max="1" name="zoom" value="1" id="zoom" />
<button class="btn btn-default">Toggle device</button><br><br>

<div class="container">
    <div class="device device-ipad">
        <div class="screen">
            <iframe src="http://www.youtube.com/embed/zSWdZVtXT7E?autoplay=1" scroll="no" frameborder="no" width="640" height="480"></iframe>
        </div>
    </div>
</div>

CSS

/* Setup */

body  {
    background: #333;
    margin: 10px;
}

/* General */

.container {
    display: inline-block;
    text-align: center;
    font-size: 0;
}

.device {
    margin: 0 auto;
    border: 1px solid #fff;
    position: relative;
    padding: 3% 10%;
    display: inline-block;
   
    -webkit-transition: all 450ms ease;
    transition: all 450ms ease;
}

.screen {
    border: 1px solid #fff;
    background: #000;
    overflow: hidden;
    display: inline-block;

    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;
}

iframe {
    display: inline-block;
}

/* .device:after {
    content: '';
    display: block;
    height: 0;
    position: absolute;

    -webkit-transition: all 450ms ease;
    transition: all 450ms ease;
}
 */

/* Device specific */

/* .device-ipad {
    padding-top: 70.33144705%;
    border-radius: 40px;
}

.device-ipad:after {
    width: 4.527081649%;
    padding-top: 4.527081649%;
    border: 1px solid #fff;
    border-radius: 50%;
    top: 46.7816092%;
    right: 1.535974131%;
}

.device-ipad .screen {
    width: 82.78092158%;
    padding-top: 62.08569119%;
    top: 5.762068966%;
    left: 8.730800323%;   
}

.device-iphone {
    width: 31.25%;
    padding-top: 65.43674699%;
    border-radius: 30px;
}

.device-iphone:after {
    width: 16.62650602%;
    padding-top: 16.62650602%;
    border: 1px solid #fff;
    border-radius: 50%;
    top: auto;
    bottom: 1.956271577%;
    right: auto;
    left: 41.68674699%
}

.device-iphone .screen {
    width: 90.36144578%;
    padding-top: 160.72289157%;
    top: 11.62255466%;
    left: 4.819277108%;   
} */

JavaScript

$('button').click(function(){
    $('.device').toggleClass('device-iphone');
    return false;
});

$('#zoom').on('change mousemove',function(){
    $('#debug').html($(this).val());
    
}).trigger('change');