Video
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
textarea
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
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 {
padding: 3em 0;
@include bp($lg){
padding: 6em 0;
}
text-align: center;
.overline {
color: var(--color);
}
.video-inner {
width: 100%;
max-width: 53.75rem;
margin: 0 auto;
}
.video-item {
position: relative;
overflow: hidden;
display: block;
border-radius: 32px;
img {
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.3s ease-in-out;
width: 100%;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: rem-calc(42);
height: rem-calc(42);
border-radius: 100%;
background-color: $white;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease-in-out;
svg {
position: absolute;
top: 50%;
left: 55%;
transform: translate(-55%, -50%);
color: $primary;
transition: color 0.3s ease-in-out;
width: 17px;
}
@include bp($lg){
width: rem-calc(92);
height: rem-calc(92);
svg {
width: 34px;
}
}
}
&:hover {
.play-icon {
background-color: $white;
svg {
color: $secondary;
}
}
img {
transform: scale(1.02);
}
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
EP 01: When is the artificial truly intelligent?
post
How intelligent are AI tea-making robots?
post
Vehicle Autonomy; the good, the bad, and the complicated
post
The dark side of AI energy consumption - and what to do about it
post
Global Food Waste - Can AI Offer a Solution?
post
AI bias is frequently failing the LGBTQ+ community
post
Unlocking the power of AI and Natural Learning
post
Making complex data available for the benefit of society
post
Lie Machines - The global fight against misinformation
post
Data Sovereignty Unveiled - Balancing Rights, Privacy, and Innovation
post
AI Explainability - Balancing Human-Machine Collaboration and Potential
post
Data Transformation Predictions for 2024 - Calligo Data Leaders Roundtable
post
There are is no readme file with this component.