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.
29 lines (28 loc) • 791 B
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 style="height: 1500px">
<video class="bv-video"></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');
}
});
</script>
</body>
</html>