<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="bannercontent">
<div class="video-overlay"> </div>
<video class="video" id="video">
<source src="" type="video/mp4"></video>
<div class="video-text">
<div class="careertext">
<h1>jhfdggfdjhgjhgj</h1>
<p>sfdgfh fghfgdh shsfd htrs shyst fghfshhtrs hshg hgfs gfh.</p>
</div>
<div class="playbtn">
<div class="playpause"><span class="playtext">Play</span></div>
</div>
</div>
</div>
.interbaybanner {
width: 532px;
height: 100%;
display: block;
float: left;
}
.bannercontent {
display: block;
float: left;
width: 100%;
height: 345px;
}
.video-overlay {
background-image: url(/hubfs/3947994/Interbay/MTEVideoDesktop.png);
display: block;
position: absolute;
height: 345px;
width: 532px;
background-repeat: no-repeat;
background-size: contain;
background-position: 0% 100%;
}
.video {
width: 532px;
min-height: 345px;
max-height: 345px;
position:absolute;
display: block;
background-size: cover;
background-position: center;
background-color: rgba(11, 77, 6, 0.8);
}
.video-text {
position: relative;
}
.playbtn {
padding: 15px 25px;
background-color: #fff;
position: absolute;
top: 281px;
left: 7px;
}
.wrapper{
position:relative;
}
.playpause {
position: relative;
cursor: pointer;
background-image: url(../hubfs/3947994/Interbay/Triangle.png);
background-size: contain;
background-position: left;
background-repeat: no-repeat;
}
.playpause:hover {
position: relative;
cursor: pointer;
background-image: url(../hubfs/3947994/Interbay/Triangle%201.png);
background-size: contain;
background-position: left;
background-repeat: no-repeat;
}
span.playtext {
position: relative;
padding-left: 30px;
top: 2px;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
color: #000000;
font-family: "GT-Walsheim-Medium";
}
.careertext {
z-index: 5;
position: absolute;
padding: 105px 51px 50px 65px;
display: block;
float: left;
width: 532px;
}
.careertext h1 {
margin: 0;
font-size: 43px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.16;
letter-spacing: normal;
color: #ffffff;
font-family: "GT-Walsheim-Medium";
}
.careertext p {
color: #fff;
line-height: 1.31;
font-size: 20px;
letter-spacing: 0.1px;
margin: 11px 0 0 0;
font-family: "GT-Walsheim-Medium";
}
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playbtn").fadeOut();
$('.playbtn').css('opacity', '0');
$('.careertext').css('opacity', '0');
$('.currentopp').css('opacity', '0');
$('.arrow').css('opacity', '0');
$('.video-overlay').css('opacity', '0');
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playbtn").fadeIn();
$('.playbtn').css('opacity', '1');
$('.careertext').css('opacity', '1');
$('.currentopp').css('opacity', '1');
$('.arrow').css('opacity', '1');
$('.video-overlay').css('opacity', '1');
}
});
var video = document.getElementById("video");
var timeStarted = -1;
var timePlayed = 0;
var duration = 0;
// remember time user started the video
function videoStoppedPlaying(event) {
// Count as complete only if end of video was reached
if(timePlayed>=duration && event.type=="ended") {
console.log("complete");
$('.playbtn').css('opacity', '1');
$('.careertext').css('opacity', '1');
$('.currentopp').css('opacity', '1');
$('.arrow').css('opacity', '1');
$('.video-overlay').css('opacity', '1');
}
}
video.addEventListener("ended", videoStoppedPlaying);
video.addEventListener("pause", videoStoppedPlaying);
/* career video end */
