background-video
Version:
backgroundVideo makes your HTML5 `<video>` behave like the CSS property `background-size: cover`, making it fully responsive and scaling to aspect ratio. backgroundVideo also has parallax options.
53 lines (52 loc) • 1.65 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Background Parallax Video</title>
<link href="../css/normalize.css" rel="stylesheet" />
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body>
<main>
<video class="bv-video"></video>
<video class="bv-video-2"></video>
<video class="bv-video-3"></video>
</main>
<script src="../dist/backgroundVideo.js"></script>
<script>
const backgroundVideo = new BackgroundVideo('.bv-video', {
src: [
'../videos/sample.mp4',
'../videos/sample.webm'
],
onReady: function () {
// Use onReady() to prevent flickers or force loading state
const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
vidParent.classList.add('bv-video-wrap--ready');
}
});
const backgroundVideo2 = new BackgroundVideo('.bv-video-2', {
src: [
'../videos/sample.mp4',
'../videos/sample.webm'
],
onReady: function () {
// Use onReady() to prevent flickers or force loading state
const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
vidParent.classList.add('bv-video-wrap--ready');
}
});
const backgroundVideo3 = new BackgroundVideo('.bv-video-3', {
src: [
'../videos/sample.mp4',
'../videos/sample.webm'
],
onReady: function () {
// Use onReady() to prevent flickers or force loading state
const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
vidParent.classList.add('bv-video-wrap--ready');
}
});
</script>
</body>
</html>