:root {
--background-default: 0 0;
--transition-ease: .3s ease;
--border-radius-video-upload: 0;
--border-radius-video-container: 0;
--padding-horizontal-small: 40px;
--animation-duration: .8s;
}
*,
::after,
::before {
box-sizing: border-box;
}
[id^=fullscreen_video_] {
padding: 0 var(--padding-horizontal-small);
width: 100%;
height: fit-content;
transition: var(--transition-ease);
display: flex;
justify-content: center;
align-items: center;
}
html {
overflow-y: scroll;
}
.close-button {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
cursor: pointer;
}
.close-button .line:last-child {
transform: rotate(-45deg);
}
.close-button .line {
position: absolute;
top: 20px;
left: 10px;
transform: rotate(45deg);
width: 20px;
height: 2px;
background-color: #fff;
}
.video-container {
display: flex;
justify-content: center;
align-items: center;
}
.fullscreen-video {
display: none;
position: fixed;
z-index: 3000;
top: 0;
left: 0;
opacity: 0;
transform: scale(0);
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
width: 100%;
max-width: unset;
height: 100%;
max-height: unset;
background-color: rgba(5, 3, 7, .75);
backdrop-filter: blur(100px);
}
.fullscreen-video--is-open {
display: flex;
opacity: 1;
transform: scale(1);
}
.dialog-video {
max-width: 95vw;
max-height: 90vh;
outline: 0;
object-fit: contain;
border-radius: var(--border-radius-video-upload);
}
.fullscreen-video--is-visible {
overflow: hidden;
width: 100vw;
height: 100vh;
}
.open-video-animation {
animation: expand 1.5s forwards .3s cubic-bezier(.5, .5, 0, 1);
}
.inline-video {
width: 100%;
min-width: 300px;
object-fit: cover
}
button, input[type=button], input[type=submit] {
padding: 0;
border: 0;
border-radius: 0;
margin: 0;
background: var(--background-default);
cursor: pointer;
}
.fullscreen-video--is-open, .fullscreen-video--is-closing {
transition: var(--transition-ease);
transition-property: opacity, transform;
}
.fullscreen-video--is-closing {
transform: scale(.2);
opacity: 0;
}
.video-wrapper {
display: flex;
position: relative;
justify-content: center;
align-items: center;
overflow: hidden;
width: 20%;
border-radius: var(--border-radius-video-container);
}
@media screen and (max-width: 425px) {
.paragraph-sm {
font-size: 1.0625rem;
}
[id^=fullscreen_video_] {
padding: 0 8px;
}
}
@media screen and (max-width: 768px) {
.video {
height: 80vh;
}
[id^=fullscreen_video_] {
padding: 0 16px;
}
}
@media screen and (max-width: 1024px) {
.video-container {
border-radius: 24px;
}
}
@keyframes expand {
0% {
width: 20%;
}
100% {
width: 100%;
}
}