@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-full-width-media {
&__image-container, &__video-container{
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
display: flex;
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
&.gradient-enabled{
&::before{
content: '';
width: 100%;
height: 40%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(180deg, var(--white), transparent);
z-index: 1;
@include bp($md){
height: 50%;
}
}
}
}
&__video-container{
aspect-ratio: 16 / 9;
.video__wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
aspect-ratio: 16/9;
transition: opacity .2s ease-out;
overflow: hidden;
iframe,
video {
min-width: 100vw;
aspect-ratio: 16 / 9;
height: auto;
top: 50%;
transform: translateY(-50%);
}
iframe {
min-width: 100vw;
aspect-ratio: 16 / 9;
height: auto;
top: 50%;
transform: translateY(-50%);
}
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;
}
}
}
}
}
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/full-width-media",
"title": "Full width media",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-full-width-media.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/full-width-media/block-full-width-media.css",
"viewScript": "vimeo-player"
}
This component is not currently used on any pages.