@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-video-expand {
padding-top: clamp(40px, 8vw, 140px);
padding-bottom: clamp(80px, 8vw, 140px);
position: relative;
@include bp($lg) {
height: 200vh;
.sticky {
position: sticky;
top: calc(106px + var(--site-header-offset));
width: 100%;
}
}
@include bp(1500px) {
height: 300vh;
}
.container {
position: relative;
width: 100%;
height: 100%;
.row {
aspect-ratio: 16/9;
}
}
.heading {
font-size: clamp(24px, 8vw, 44px);
font-weight: 600;
color: var(--text-color);
@include bp($lg) {
--from: 1;
--to: 0;
--start: .3;
--stop: .7;
opacity: calc(var(--from) + (var(--to) - var(--from)) * (max(0, min(1, (var(--percentage) - var(--start)) / (var(--stop) - var(--start))))));
}
opacity: 1;
transition: opacity .2s ease-out;
}
.content {
p {
margin-bottom: 1.5rem;
}
}
.content-col {
@include bp($lg) {
--from: 1;
--to: 0;
--start: .3;
--stop: .7;
opacity: calc(var(--from) + (var(--to) - var(--from)) * (max(0, min(1, (var(--percentage) - var(--start)) / (var(--stop) - var(--start))))));
}
opacity: 1;
transition: opacity .2s ease-out;
}
.video {
margin-top: 1rem;
z-index: 2;
aspect-ratio: 16/9;
border-radius: 40px 40px 0 0;
@include bp($lg) {
aspect-ratio: 2/1;
position: absolute;
margin-top: 0;
/* right: calc(((100vw - 992px) / 2.5) * -1); */
--right-from: calc(((100vw - 992px) / 2.5) * -1);
--right-to: calc(var(--right-from) + ((100vw - 992px) / 2.5));
--start: .25;
--stop: .55;
--from: calc((4/12) * 100%);
--to: calc(90%);
width: calc(var(--from) + (var(--to) - var(--from)) * (max(0, min(1, (var(--percentage) - var(--start)) / (var(--stop) - var(--start))))));
right: calc(var(--right-from) + (var(--right-to) - var(--right-from)) * (max(0, min(1, (var(--percentage) - var(--start)) / (var(--stop) - var(--start))))));
}
@include bp($xl) {
--right-from: calc(((100vw - 1200px) / 2.5) * -1);
--right-to: calc(var(--right-from) + ((100vw - 992px) / 2.8));
}
@include bp(1400px) {
--right-to: calc(var(--right-from) + ((100vw - 992px) / 3));
--to: calc(99%);
}
opacity: 1;
transform: translateZ(1px);
picture,
img {
border-radius: 40px;
}
}
.video__wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 40px;
transition: opacity .2s ease-out;
overflow: hidden;
iframe,
video {
width: 100%;
height: 100%;
border-radius: 40px;
border-radius: 40px;
}
video {
object-fit: cover;
}
&:has(video) + .controls {
display: none;
}
}
.controls {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
.play {
width: 3rem;
height: 3rem;
background-color: var(--secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&::before {
content: '';
width: 0;
height: 0;
border-left: 0.75rem solid white;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
}
}
}
}
.acf-block-preview {
.block-video-expand {
height: initial !important;
@include bp($lg) {
height: initial !important;
}
.container {
aspect-ratio: unset !important;
}
.video {
position: relative !important;
}
}
}
class VideoExpand {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
let video = this.block.querySelector('.video');
if(!video) return;
video.addEventListener('play', () => {
if(video.classList.contains('background')){
return;
}
if (window.innerWidth >= 992) {
this.block.scrollIntoView({ behavior: 'smooth', block: 'end' });
} else {
video.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
let videoElem = video.querySelector('video');
if(videoElem){
videoElem.addEventListener('play', () => {
if (window.innerWidth >= 992) {
this.block.scrollIntoView({ behavior: 'smooth', block: 'end' });
} else {
video.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
}
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-video-expand').forEach((block) => {
new VideoExpand(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/video-expand",
"title": "Video Expand",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-video-expand.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Video Expand",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/video-expand/block-video-expand.css",
"viewScript": ["video-expand", "vimeo-player"],
"allowedBlocks": ["core/paragraph"]
}
This component is not currently used on any pages.