"Minimalist-Responsive Embeded Video Page"
Bootstrap 3.3.0 Snippet by bootleg

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
28
29
30
31
32
33
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="row" style="height: 224px;">
<div class="col-md-12 col-xs-12 nopadding">
<h2 class="text-center">Home</h2>
<h1 class="text-center">FMV</h1>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0 nopadding">
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe id="ytiframe" class="embed-responsive-item" width="854" height="480" src="https://www.youtube.com/embed/5YL_dOgEGVw?vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p></p>
<span class="highlight">· Where It Goes ·</span>
<p></p>
</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
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Bevan');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css?family=Pontano+Sans');
@media (max-width: 480px) {
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
}
@media (min-width: 768px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 32px;
}
}
html,
body {
height: 100%;
margin:0;
padding:0;
}
h1 {
font-family: 'Bevan', cursive;
color: #ffffFF;
padding:0;
margin:0;
margin-bottom:8px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: