Bootstrap Snippet TEST: Video 2 Full Screen using HTML CSS

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 ---------->
<!-- Ref: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video  -->
<div class="container">
    <div id="page">
        <h2>Test Full Screen Vid</h2>
        <a href="http://bootsnipp.com/iframe/7QQ62" target="_blank">full screen</a>
<h1>Here is some Text</h1>
            <div class="row">
    </div>
</div>
    </div>
<video class="visible-sm visible-md visible-lg" " autoplay muted loop poster="http://i.imgur.com/yyPiKFD.jpg" id="bgvid">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
    
<div class="visible-xs">
    <img src="http://i.imgur.com/ds01Rcv.jpg" alt="" class="img-responsive img-rounded center-block">
    <p class="text-center btn-success">
        Extra small devices Phones (<768px)
    </p>
</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
html,
body {
    height:100%;
    color:#ccc;
}
*{
    margin:0;
    padding:0;
}
video { display: block; }
video#bgvid {
    position: fixed; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}
#page {
    position:absolute;
    top:0; right:0 z-index:1;
    width:50%; height:100%;
    background:rgba(0,0,0,.5);
}
    
@media screen and (max-device-width: 800px) {
    html { background: url(http://i.imgur.com/yyPiKFD.jpg) #000 no-repeat center center fixed; }
    #bgvid { display: none; }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: Video 2 Full Screen"
Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Video 2 Full Screen" Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Video 2 Full Screen"
Bootstrap 3.3.0 Snippet by mrmccormack