<!--
Forum question answer only:
https://www.sitepoint.com/community/t/how-to-fadeout-the-play-svgs/377559/9
-->
<div class="outer">
<div class="container play1 with-curtain">
<button class="playa thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
</g>
</svg>
</button>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<g id="exit">
<title>exit</title>
<path class="exitHover" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" fill="red" />
<circle cx="0" cy="0" r="113" />
<path class="exitHover" fill="blue" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
</g>
</svg>
</button>
</div>
</div>
<div class="container play2 with-curtain">
<button class="playb thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play3 with-curtain">
<button class="playc thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play4 with-curtain">
<button class="playd thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play5 with-curtain">
<button class="playe thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play6 with-curtain">
<button class="playf thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play7 with-curtain">
<button class="playg thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play8 with-curtain">
<button class="playh thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play9 with-curtain">
<button class="playi thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrap">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg width="100%" height="100%" viewBox="-144 -144 288 288">
<use href="#exit" />
</svg>
</button>
</div>
</div>
</div>.play1 {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
}
.play2 {
--color-a: purple;
--color-b: black;
--color-c: purple;
--color-d: black;
}
.play3 {
--color-a: green;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play4 {
--color-a: orange;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play5 {
--color-a: yellow;
--color-b: black;
--color-c: yellow;
--color-d: black;
}
.play6 {
--color-a: blue;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play7 {
--color-a: red;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play8 {
--color-a: white;
--color-b: black;
--color-c: white;
--color-d: black;
}
.play9 {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
animation: fadeInButtons 0s ease 0s forwards;
}
@keyframes fadeInButtons {
0% {
opacity: 0;
pointer-events: none;
}
99% {
pointer-events: none;
}
100% {
opacity: 1;
pointer-events: initial;
}
}
.thePlay circle {
animation: fadeInButtons 0s ease 0s forwards;
pointer-events: none;
}
body.initial-fade {
animation: initial-fade 0s ease forwards;
}
@keyframes initial-fade {
to {
opacity: 0;
}
}
.initial-fade .thePlay,
.initial-fade .thePlay * {
pointer-events: none !important;
}
.outer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
width: 290px;
box-sizing: border-box;
justify-content: center;
align-content: center;
margin: auto;
gap: 10px;
}
.outer.isOpen {
/*display: flex;*/
width: auto;
/*align-content: stretch;*/
}
.fadingOut .isOpen {
animation: fadingOut 1s;
animation-delay: 8s;
}
@keyframes fadingOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.container {
display: flex;
justify-content: center;
position: relative;
/*z-index: 2;*/
}
.container.active {
flex: 1 0 0;
}
body.bg1 {
animation: fadeInBody 5s ease 0s forwards;
animation-delay: 0s;
opacity: 0;
}
@keyframes fadeInBody {
100% {
opacity: 1;
}
}
body.bg1 .with-curtain:before {
content: "";
position: fixed;
/*z-index: 1;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 165px 165px;
background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
linear-gradient(
90deg,
var(--color-b) 10px,
#0000 10px 160px,
var(--color-b) 160px
),
linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
linear-gradient(
90deg,
var(--color-c) 15px,
#0000 15px 155px,
var(--color-c) 155px
),
linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
linear-gradient(
90deg,
var(--color-d) 20px,
#0000 20px 150px,
var(--color-d) 150px
),
linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
linear-gradient(
90deg,
var(--color-a) 25px,
#0000 25px 145px,
var(--color-a) 145px
),
linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
linear-gradient(
90deg,
var(--color-b) 30px,
#0000 30px 140px,
var(--color-b) 140px
),
linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
linear-gradient(
90deg,
var(--color-c) 35px,
#0000 35px 135px,
var(--color-c) 135px
),
linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
linear-gradient(
90deg,
var(--color-d) 40px,
#0000 40px 130px,
var(--color-d) 130px
),
linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
linear-gradient(
90deg,
var(--color-a) 45px,
#0000 45px 125px,
var(--color-a) 125px
),
linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
linear-gradient(
90deg,
var(--color-b) 50px,
#0000 50px 120px,
var(--color-b) 120px
),
linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
linear-gradient(
90deg,
var(--color-c) 55px,
#0000 55px 115px,
var(--color-c) 115px
),
linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
linear-gradient(
90deg,
var(--color-d) 60px,
#0000 60px 110px,
var(--color-d) 110px
),
linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
linear-gradient(
90deg,
var(--color-a) 65px,
#0000 65px 105px,
var(--color-a) 105px
),
linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
linear-gradient(
90deg,
var(--color-b) 70px,
#0000 70px 100px,
var(--color-b) 100px
),
linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
linear-gradient(
90deg,
var(--color-c) 75px,
#0000 75px 95px,
var(--color-c) 95px
),
linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
linear-gradient(
90deg,
var(--color-d) 80px,
#0000 80px 90px,
var(--color-d) 90px
),
linear-gradient(var(--color-a), var(--color-a));
}
.thePlay:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.thePlay:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.outer:not(.isOpen) .inner-container {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
max-width: none;
min-width: 0;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
max-width: none;
min-width: 0;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
.thePlay {
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: none;
fill: blue;
background: transparent;
padding: 0;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.played {
fill: green;
}
button.thePlay {
pointer-events: none;
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
animation: fadeInExit 9s forwards 9s;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit svg {
fill: red;
transition: fill 3s ease;
}
.exit:hover svg,
.fadingOut .exit svg {
fill: green;
}
.fadingOut .exit {
animation: fadeOutExit 8s forwards;
pointer-events: none;
opacity: 1;
}
@keyframes fadeOutExit {
to {
opacity: 0;
}
}
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
transition: transform linear 6s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
transform: translateX(0%);
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain4 .panel-left::before,
.curtain4 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain5 .panel-left::before,
.curtain5 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain6 .panel-left::before,
.curtain6 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain7 .panel-left::before,
.curtain7 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain8 .panel-left::before,
.curtain8 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.curtain9 .panel-left::before,
.curtain9 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.panel-right::before {
left: -100%;
}
.container.active .curtain .panel-left {
/*animation: curtain1-open 8s forwards 2s;*/
transform: translateX(calc(-100% - 1px));
}
/*
@keyframes curtain1-open {
to {
transform: translateX(calc(-100% - 1px));
}
}
*/
.container.active .curtain .panel-right {
/* animation: curtain2-open 8s forwards 2s;*/
transform: translateX(calc(100% + 1px));
}
/*
@keyframes curtain2-open {
to {
transform: translateX(calc(100% + 1px));
}
}
*/
.container.active .curtain .reverse .panel-left,
.container.active .curtain .reverse .panel-right {
transform: translateX(0);
}
.fadingOut .container.active .curtain .panel-left {
/*animation: curtain1-close 8s forwards;*/
transform: translateX(0);
}
/*
@keyframes curtain1-close {
from {
transform: translateX(calc(-100% - 1px));
}
to {
transform: translateX(0);
}
}
*/
.fadingOut .container.active .curtain .panel-right {
/*animation: curtain2-close 8s forwards;*/
transform: translateX(0);
}
/*
@keyframes curtain2-close {
from {
transform: translateX(calc(100% - 1px));
}
to {
transform: translateX(0);
}
}
*/
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
user-select: none;
}
.hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
max-width:none;
min-width:none;
}
/*jslint devel: true */
const curtain = document.querySelector(".sliding-panels");
curtain.addEventListener("click", reverseAnimation);
function reverseAnimation() {
curtain.classList.toggle("reverse");
}
const manageCover = (function makeManageCover() {
const config = {};
const body = document.body;
var originalEvent = "";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function hideAll(elements) {
elements.forEach(hide);
}
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function hideButton(button) {
button.classList.add("isOpen");
}
allButtons.forEach(hideButton);
}
function resetPage() {
resetBackground("body");
resetButtons(".outer");
}
function markAsPlayed(played) {
played.classList.add("played");
}
function showCovers(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
show(cover);
}
function animationEndHandler2(evt) {
const animationName = evt.animationName;
if (animationName === "initial-fade") {
coverClickHandlerContinue(originalEvent);
}
}
function coverClickHandler(evt) {
originalEvent = evt.currentTarget;
body.classList.add("initial-fade");
}
function coverClickHandlerContinue(originalEvent) {
console.log(originalEvent);
body.classList.remove("initial-fade");
hideAll(config.containers);
resetPage();
markAsPlayed(originalEvent);
const cover = originalEvent;
showCovers(cover);
}
function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}
function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}
function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
body.addEventListener("animationend", animationEndHandler2);
}
return {
addCoverHandler,
init
};
})();
const manageUI = (function makeManageUI() {
const body = document.body;
function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);
function showBackground(background) {
background.classList.remove("bg1");
}
allBackgrounds.forEach(showBackground);
}
function resetCurtains(curtainSelector) {
const allCurtains = document.querySelectorAll(curtainSelector);
function showCurtain(curtain) {
curtain.classList.remove("active");
}
allCurtains.forEach(showCurtain);
}
function showAllButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("hide");
}
allButtons.forEach(showButton);
}
function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);
function showButton(button) {
button.classList.remove("isOpen");
}
allButtons.forEach(showButton);
}
function animationEndHandler(evt) {
const animationName = evt.animationName;
console.log(animationName);
if (animationName === "fadingOut") {
fadeReset();
}
}
function fadeReset() {
body.classList.remove("fadingOut");
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".hide");
resetButtons(".outer");
}
function resetPage() {
body.classList.add("fadingOut");
}
function exitClickHandler() {
resetPage();
}
function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}
function addExitHandlers(callback) {
const resetVideo = document.querySelectorAll(".exit");
resetVideo.forEach(function resetVideoHandler(video) {
video.addEventListener("click", callback);
});
}
function init() {
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
body.addEventListener("animationend", animationEndHandler);
}
return {
addExitHandlers,
init
};
})();
const videoPlayer = (function makeVideoPlayer() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
}
function onPlayerStateChange(event) {
const player = event.target;
return player;
}
function addPlayer(video, playerOptions) {
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
const player = new YT.Player(video, playerOptions);
return player;
}
return {
addPlayer
};
})();
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 1,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function show(el) {
el.classList.remove("hide");
}
function combinePlayerOptions(opts1 = {}, opts2 = {}) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}
function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}
function createCallback(wrapper, playerOptions) {
return function callback() {
initPlayer(wrapper, playerOptions);
};
}
function playerAdder(parent, playerOptions) {
const wrapper = parent.querySelector(".wrap");
return function callback() {
initPlayer(wrapper, playerOptions);
};
}
function removePlayer(player) {
setTimeout(function () {
player.destroy();
}, 8000);
}
function removePlayerHandler(evt) {
const el = evt.target;
const container = el.closest(".container");
const wrapper = container.querySelector(".wrap");
managePlayer.remove(wrapper.player);
}
function initPlayer(wrapper, playerOptions) {
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
}
return {
adder: playerAdder,
createCallback,
remove: removePlayer,
removePlayerHandler
};
})();
const players = (function coverUIPlayerFacade() {
function addPlayer(coverSelector, playerOptions) {
const parent = document.querySelector(coverSelector).parentElement;
const callback = managePlayer.adder(parent, playerOptions);
manageCover.addCoverHandler(coverSelector, callback);
}
function init() {
manageCover.init({
container: ".container",
playButton: ".thePlay"
});
manageUI.init({});
manageUI.addExitHandlers(managePlayer.removePlayerHandler);
}
return {
add: addPlayer,
init
};
})();
players.init();
function onYouTubeIframeAPIReady() {
players.add(".playa", {});
players.add(".playb", {});
players.add(".playc", {});
players.add(".playd", {});
players.add(".playe", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
players.add(".playf", {});
players.add(".playg", {});
players.add(".playh", {});
players.add(".playi", {});
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.