<div class="parallax-video"><video class="parallax-video__video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="../images/content/video2.m4v" type="video/mp4" />
<source src="../images/content/video2.webm" type="video/webm" /></video></div>
if picture
.parallax-image
+include('@picture', picture)
if video
.parallax-video
video.parallax-video__video(playsinline autoplay muted loop)
source(src=video.mp4 type='video/mp4')
source(src=video.webm type='video/webm')
{
"video": {
"mp4": "../images/content/video2.m4v",
"webm": "../images/content/video2.webm"
}
}
import SimpleParallax from 'simple-parallax-js';
// Parallax image
const parallaxImage = document.querySelectorAll('.parallax-image img');
parallaxImage.forEach(
parallax => new SimpleParallax(parallax, {
delay: 0,
scale: 1.3,
}),
);
// Parallax video
const parallaxVideo = document.querySelectorAll('.parallax-video__video');
parallaxVideo.forEach(
parallax => new SimpleParallax(parallax, {
delay: 0,
scale: 1.3,
}),
);
.parallax-image {
aspect-ratio: 2 / 1;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
img {
object-fit: cover;
}
}
.parallax-video {
aspect-ratio: 16 / 9;
background-color: #000;
display: block;
height: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.parallax-video__video {
background-color: transparent;
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
default: 767 * 384, ratio 2 / 1
> 768px: 1259 * 630, ratio 2 / 1
> 1260px: 1920 * 960, ratio 2 / 1