Bootstrap Snippet Nexus 5 Adaptive Video Mockup using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="nexusframe">
            <!---Upload your ADB screen recording (Only available 4.4+) to Vimeo, YouTube, etc. Then embed.-->
                <iframe src="//player.vimeo.com/video/86959854" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#nexusframe{
    background: url("http://www.skiptu.com/sites/default/files/nexus_framed_trim.png") no-repeat;
    /*margin-top: 50px;*/
    padding-bottom: 100px;
    width:400px;
    height:683px;
    background-size:100%;
}
iframe{
   padding-top: 50px;
   margin-top: auto;
   margin-left: 46px;
   width: 307px;
   height: 598px;
}
@media (max-width: 480px){
    #nexusframe{
    width:280px;
    }
    iframe{
        width: 215px;
        height: 432px;
        margin-left: 32px;
        margin-top: -11px;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nexus 5 Adaptive Video Mockup"
Bootstrap 3.1.0 Snippet by palmdeezy

Related: See More

Questions / Comments:

"Nexus 5 Adaptive Video Mockup" Bootstrap 3.1.0 Snippet by palmdeezy

Related: See More

Questions / Comments:

"Nexus 5 Adaptive Video Mockup"
Bootstrap 3.1.0 Snippet by palmdeezy