Video
Greener shipping
With local pickup
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
text
heading_text
Sub Heading
text
sub_heading
Video Placeholder Image
image
video_placeholder_image
If no image selected and video is YouTube or Vimeo, the thumbnail will be retrieved.
Video Source
select
video_source
Video File
file
video_file
Video URL
url
video_url
Must be a link to a YouTube or Vimeo video.
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-video {
text-align: center;
.overline {
color: var(--color);
}
}
.video-inner {
max-width: 60rem;
margin: 0 auto;
}
.video-item {
position: relative;
overflow: hidden;
display: block;
border-radius: 20px;
img {
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.3s ease-in-out;
width: 100%;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($black, 0.4);
z-index: 2;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: 4rem;
height: 4rem;
border-radius: 100%;
background-color: $primary;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease-in-out;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $white;
transition: color 0.3s ease-in-out;
}
}
&:hover {
.play-icon {
background-color: $secondary;
.icon {
color: $white;
}
}
img {
transform: scale(1.02);
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.