Bootstrap Snippet TEST Mr. M.'s Full Screen Video Background using HTML CSS Bootstrap jQuery

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Both these should be added to within the <head> of your document-->
<link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'>
<script src="http://pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>
<!--Video Section-->
<section class="content-section video-section">
<div class="pattern-overlay">
  
<div class="container ">
<!-- this is the background video, inside container div, and height set to 100% in CSS  -->
    <a  id="bgndVideo" class="player"
    data-property="{videoURL:'https://www.youtube.com/watch?v=YyOENdBj5kA',
    containment:'body',
    quality:'hd720',
    autoPlay:true,
    mute:true,
    startAt: 6, 
    opacity: 1}">bg</a>
    
<!--more VIDO  options at https://github.com/pupunzi/jquery.mb.YTPlayer/wiki -->    
<div class="row">
        <div class="col-lg-12">
        <h1> Full Screen Video</h1>  
        <h3>Enjoy Adding Full Screen <img src="http://citynet.bg/citynet_files/web_favicons/Youtube-black-and-white-.png" alt=""> Videos</h3> 
        
        <!-- Begin Mr. M.'s Rows --> 
  
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
.container{
height:100%;    
    }
.col-md-4{
 background-color:#D3D7E0;
 opacity: 0.8;
margin-top:20px;
padding: 30px;
height:300px;
}
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.29);
padding: 110px 0 32px;
min-height: 1500px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$(document).ready(function () {
    $(".player").mb_YTPlayer();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST Mr. M.'s Full Screen Video Background"
Bootstrap 3.0.3 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST Mr. M.'s Full Screen Video Background" Bootstrap 3.0.3 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST Mr. M.'s Full Screen Video Background"
Bootstrap 3.0.3 Snippet by mrmccormack