jquery.countdown + jquery.videoBG
possible conflict?!
HTML
<script src="//cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>
<script src="//cdn.rawgit.com/sydlawrence/jquery.videoBG/master/jquery.videoBG.js"></script>
<div class="videoz">
<div class="countdown">
</div>
</div>
CSS
html,body {
height:100%;
width:100%;
}
.videoz {
height:100%;
width:100%;
}
.countdown {
left: 0;
margin: 10px auto 5px;
right: 0;
text-align: center;
min-height:30px;
}
.countdown:before, .countdown:after {
content: " ";
display: table;
}
.countdown:after {
clear: both;
}
.countdown:before, .countdown:after {
content: " ";
display: table;
}
.countdown:after {
clear: both;
}
.countdown .time-section {
background-color: rgba(0,0,0, 0.15);
border-radius: 50%;
display: inline-block;
height: 65px;
margin: 0 2px;
width: 65px;
}
.countdown .time-section > span {
display: block;
}
.countdown .time-section .time-num {
font-size: 24px;
font-weight: bold;
line-height: 22px;
margin-top: 14px;
color:#FFF;
}
.countdown .time-section .time-label {
color: rgba(0, 0, 0, 0.75);
color:#FFF;
}
JavaScript
$(".countdown").countdown("2014/07/12", function(event) {
$(this).html(event.strftime("<span class='time-section'> <span class='time-num'>%D</span> <span class='time-label'>days</span> </span> <span class='time-section'> <span class='time-num'>%H</span> <span class='time-label'>hours</span> </span> <span class='time-section'> <span class='time-num'>%M</span> <span class='time-label'>mins</span> </span> <span class='time-section'> <span class='time-num'>%S</span> <span class='time-label'>secs</span> </span>"));
});
//comment this section out to show working ticker.
//problem is that the videoBG plugin is duping the parent DOM element for some silly reason.
$(".videoz").videoBG({
mp4:'http://google.com/hangouts/img/hangouts.mp4',
webm:'http://google.com/hangouts/img/hangouts.webm',
ogv:'http://google.com/hangouts/img/hangouts.ogv'
});