How to fadeout the play svgs

Where was the active class added originally?

I believe, if I’m not mistaken, you placed the active class where it has always been, and it has never moved from that spot.

post #2

  function showCovers(playButton) {
    const cover = playButton.parentElement;
    console.log(playButton)
    cover.classList.add("active");
    show(cover);
  }

Update: I was able to get the play buttons to fade out using your code.

Seen Here: https://jsfiddle.net/dqkhj1ym/

Nothing happens after that.

I saw you placed a console.log(playButton) statement in there.

Did that tell you anything?

After removing that statement from the code because I don’t think it tells you anything.

This is what comes up in the console log now:

Also, I cleaned up the code here removing minor errors: https://jsfiddle.net/hm0w8ury/

The screen is still blank and empty though.

Update: At this link: https://jsitor.com/dOGCaoxWM

With auto play turned on.
Volume turned on.

After clicking on the play button, the video starts playing.

But the screen is still empty and blank.

Does any of that tell you anything?

Can you post the link to the last fully working demo before the latest changes were added so we can compare where the classes were being added.

Adding this js makes that fiddle work.

/*jslint devel: true */

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", {});
}

Paul won’t like it though as it uses a global variable.:slight_smile:

1 Like

This was the last working code before fade was added to the buttons.

post #7 Code: https://jsfiddle.net/rtv7zaxh/

I don’t need it now as I posted the working solution in my last post :slight_smile:

1 Like

This was my attempt at placing the play buttons in a separate container that is not mixed in with the html.

I was able to have the buttons fade in, but that is it.

And I was able to click on a button where it changed to another color.

https://jsfiddle.net/bs7gnhuv/

I would guess that the css would then need to be readjusted.

body {
  background: #353198;
}

.playButtonContainer{
  display: flex;
  flex-wrap: wrap;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;

  }
}
body.initial-fade {
  animation: initial-fade 0s ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}
.initial-fade {
  cursor: default;
}

.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;
  }
}
<div class="outer">
   <div class="container play1 with-curtain">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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 class="playButtonContainer">
      <button class="playa thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playb thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playc thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playd thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playe thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playf thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playg thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playh thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
      <button class="playh thePlay" type="button" aria-label="Open">
         <svg width="100%" height="100%" viewBox="0 0 64 64">
            <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" />
         </svg>
      </button>
   </div>
</div>

I thought we agreed that the way it current is is the most semantic. We have already achieved all the effects you wanted with the semantic version so I see no real need in pursuing this avenue.

What else did you expect to happen when you faded them in?

Yes, but what is the actual question?

I don’t know what it is you want to achieve that you haven’t done already on that section?

If you are talking bout the player not showing then of course it won’t show because now you don’t have a parent and child relationship for the button and the player and the js will throw an error right at the start.

?editor_console=true:1154 Uncaught TypeError: Cannot read properties of null (reading ‘parentElement’)

const parent = document.querySelector(coverSelector).parentElement;

Once you have fixed that then you would need to look at where classes are being added in order to hide and show the relevant items.

I like to try to figure out how to do things which seem very difficult.

I like challenges.

With it all fixed, what would, or should the properties be on both of these?

How would these be written differently than they are now?

Would outer not be needed then?

Maybe it would, but in the css, outer should come first, than the container.

.playButtonContainer{
  display: flex;
  flex-wrap: wrap;
  width: 290px;
  gap: 10px;
}

.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;*/
}

Outer would not be needed at all but you would need to add the relevant rules from outer to .container and .playContainer.

e.g.

.playButtonContainer{
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin:auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;  
}

Then add min-height:100% to .container.

When the play button is clicked you need to fade out the playContainer and then remove it from the flow preferably with clip or move it off screen or with the visibility (hack) already mentioned.

Next you would add a class on to .container to show the relevant item while removing the hide class.

e.g.

<div class="container play1 with-curtain active">

To be able to fade this in nicely the hide class should not use display:none as mentioned quite a few times now and will allow you to fade in nicely. You can fade out the play container with a timed fade and then you fade in the container with a timed fade but with an animation delay to match the fade out.

You could if you want absolutely place the player container over the whole page and then you could have a cross fade effect where the playbuttons fade out while the real page fades in at the same time (rather than each being separate).

1 Like

If I were to absolutely place this, how would it be written?

Flex would be removed?

.playButtonContainer{
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin:auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;  
}

I would be using this? My attempt: https://jsfiddle.net/5ok98utd/2/

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

But then this won’t work in there if flex is removed: gap: 10px;

I don’t think you meant this:

.playButtonContainer{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  
  
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;  
}

No. Flex is needed for the centering.

Just add the absolute positioning as well.

.playButtonContainer {
  position:absolute;
  left:0;
  right:0;
  top:0;
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;
}
1 Like

At this link here, when the play buttons are clicked, the video is playing, but the buttons are still visible.

https://jsitor.com/qBIwA32p9

Yes because as I already explained the whole js function has to be rewritten to tke account of the new structure.

Previously the player was in the same container as the video so when the player was clicked it just had to find the current parent to fade in the whole container while at the same time knowing the player was inside this element also.

Now that you have the players outside the containers for the video you will need to pass a reference to the right container when a playbutton is clicked. You also won;t need to do many of the hide and shows because all the playbuttons are in the same container so that is known from the start and can be hidden each time any button is clicked.

I would suggest that you add a class to the body tag indicating the player to be opened and that body class can be used to target the correct item.

I’ll hard code one player button and one container so you can see what needs to be done. I know nothing about your player initialisation though so i will leave that for the experts. Give me 30 minutes for the basic demo.

1 Like

This is just a start as I need to sort out the animation on the exit button as that can be a simple transition only but this shows you how simple things can be.

I’ve hard coded the first play button to open the first container (but no video yet of course).

All the transitions can take place on one class with no checking of animation end and no multiple classes so far.

The cross fade is in effect and can adjusted in the transition timings.

There is a lot to check that needs cleaning up but I haven’t got that far yet.

1 Like

The css needs to be adjusted so that the buttons and video are centered.

The cross fade thing is neat.

I thought the html was being set like this?

Is that still being done, or it won’t work that way?

When I saw the html, I was confused.

You said this:

absolutely place the player container over the whole page and then you could have a cross fade effect where the playbuttons fade out while the real page fades in at the same time (rather than each being separate).

Also, why was transition used instead of animation?

Is there a reason why that one was chosen?

<div class="playButtonContainer">
  <button class="playa thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playb thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playc thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playd thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playe thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playf thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playg thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playh thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>
  <button class="playh thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>
  </button>


  <div class="outer">
    <div class="container play1 with-curtain">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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">
      <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>
</div>

Yes the playButtonContainer is absolutely placed so that it can stay at the top of the viewport while it fades out and then the new container (which does not need to be absolutely placed) can crossfade over the top of it. It’s like two sheets of paper on top of each other. If the paper becomes partially transparent then you can see through to both of them at the same time as they occupy the same space.

Because with transition you only have to code the one way. To return to the original state you just remove the class you added and the reverse transition takes place automatically. With animation you have to do two keyframes to achieve this and probably two classes to kick start the animation. Effectively we are using one or two lines of css instead of about 20 (i exaggerate a lot).

Give me a little while and I’ll update the demo to remove the class and you will see that it all transitions back to normal. It may need a helping hand but I’d need to do it and check first.

Aside: For some reason in your demos you are using 2 playh elements when there should be a playi element (at a guess).

1 Like

So, the idea was not for <div class="playButtonContainer"> to cover the entire html?

Maybe I misunderstood you when you said, “place the player container over the whole page”

Which was not meant to mean, place the playButtonContainer over the entire html.

As for the duplicated class:

In my last working code, or one of them.

8 of these are not being used, only 1, so I had to make 8 of these and so I may have duplicated one while doing that.

<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>

I meant place it over the viewport so that it is always at the top. If it was in the flow then it couldn’t cross fade. For a cross fade to happen both elements need to be in the same place.

I’ve updated the code so that the exit button goes back to the playbutton screen.

As you can see its only a few lines of js and much less css now to do this. Obviously in the js you will need to loop through all the elements and get all the references (rather than the hard coded versions I did) but the logic remains the same and should be accomplished in half the code from before.

There are probably loads of loose ends to tie up and positioning and transition timings to take care of but as a proof of concept it ticks the main boxes.

I think I’ve done enough of this now and its up to you to take it from here and refine and embellish and correct the js. There should be no need for animation end or to swap multiple classes in the js as it can be done with the two classes and setting the transition timing in the css. (You can add your played class back in of course but that should be pretty straight forward)

1 Like

Nothing to do with the above but why are you supplying what looks like same curtains to 9 different elements?

.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>");
}

Unless Ilm mistaken you have repeated the same data image 9 times when the look to be all the same?

You only need the one.

This one:

.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;
}