138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Heading -->
|
|
<title>Video Background</title>
|
|
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../../../favicon.ico">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<link rel="stylesheet" href="../../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
|
|
<link rel="stylesheet" href="./dist/hs-video-bg.min.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../../../assets/css/theme.css">
|
|
</head>
|
|
<body>
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-5">
|
|
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-h-450rem"
|
|
data-options='{direction: "normal"}'>
|
|
<div class="dzsparallaxer--target" style="height: 130%; background-color: #000; background-image: url(../../../assets/media/html5-video/working-in-office/working-in-office.jpg);"
|
|
data-forcewidth_ratio="1">
|
|
<div class="js-video-bg position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"videoId": "../../../assets/media/html5-video/working-in-office/working-in-office"
|
|
}'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-5">
|
|
<div class="position-relative min-h-450rem">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"videoId": "../../../assets/media/html5-video/working-in-office/working-in-office"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-5">
|
|
<div class="position-relative min-h-450rem">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"type": "you-tube",
|
|
"videoId": "d4eDWc8g0e0"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-5">
|
|
<div class="position-relative min-h-450rem">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"type": "vimeo",
|
|
"videoId": "167434033"
|
|
}'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll min-h-450rem mb-5"
|
|
data-options='{direction: "normal"}'>
|
|
<div class="dzsparallaxer--target" style="height: 130%; background-color: #000; background-image: url(../../../assets/media/html5-video/working-in-office/working-in-office.jpg);"
|
|
data-forcewidth_ratio="1.77">
|
|
<div class="js-video-bg position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"videoId": "../../../assets/media/html5-video/working-in-office/working-in-office",
|
|
"ratio": 0.75
|
|
}'></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-relative min-h-450rem mb-5">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"videoId": "../../../assets/media/html5-video/working-in-office/working-in-office",
|
|
"ratio": 0.75
|
|
}'>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-relative min-h-450rem mb-5">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"type": "you-tube",
|
|
"videoId": "d4eDWc8g0e0",
|
|
"ratio": 0.75
|
|
}'>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-relative min-h-450rem">
|
|
<div class="js-video-bg position-absolute w-100 h-100"
|
|
data-hs-video-bg-options='{
|
|
"type": "vimeo",
|
|
"videoId": "167434033",
|
|
"ratio": 0.75
|
|
}'>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<script src="../../../assets/vendor/jquery/dist/jquery.min.js"></script>
|
|
<script src="../../../assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
|
<script src="../../../assets/vendor/popper.js/dist/umd/popper.min.js"></script>
|
|
<script src="../../../assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
|
|
<script src="../../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
|
|
<script src="./dist/hs-video-bg.min.js"></script>
|
|
|
|
<script>
|
|
$(document).on('ready', function () {
|
|
$('.js-video-bg').each(function () {
|
|
var videoBg = new HSVideoBg($(this)).init();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|