Home > Mobile >  Prevent clicking outside the blue circle svg
Prevent clicking outside the blue circle svg

Time:09-18

Right now you're able to click outside the blue circle,

How do I prevent that?

So that it only opens when clicking on the svg itself?

Meaning, white space and everything inside the svg?

That is all I am trying to do.

Prevent clicking outside the blue svg circle.

How would I be able to do that in the code?

How it works is, after clicking on the blue svg's they open up.

https://jsfiddle.net/s5bzampu/

const manageCover = (function makeManageCover() {
  const config = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

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

  function coverClickHandler(evt) {
    hideAll(config.containers);
    const cover = evt.currentTarget;
    showCovers(cover);
     document.querySelector('.outer').classList.add('isOpen');
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function addEventHandler(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);
  }

  return {
    addCoverHandler,
    init,
    show
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const players = [];

  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 addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) && videoIds;
    const playlist = Array.isArray(videoIds) && videoIds;
    const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
      playlist: playlist || undefined
    };

    config.events = {
      "onReady": onPlayerReady
    };
    const defaultOptions = config;
    const playerOptions = Object.assign({}, defaultOptions, settings);
    players.push(new YT.Player(video, playerOptions));
  }

  return {
    addPlayer
  };
}());


const managePlayer = (function makeManagePlayer() {
  const config = {
    height: 600,
    width: 360
  };
  config.playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    rel: 0
  };

  function show(el) {
    el.classList.remove("hide");
  }

  function createPlayerOptions(settings) {
    function paramInOptions(opts, param) {
      if (settings[param] !== undefined) {
        opts[param] = settings[param];
        delete settings[param];
      }
      return opts;
    }

    const optionParams = ["width", "height", "playlist", "host", "videoid"];
    const defaultOptions = config;
    const preferred = optionParams.reduce(paramInOptions, {});
    const playerOptions = Object.assign({}, defaultOptions, preferred);
    // settings should now only consist of playerVars
    const defaultVars = config.playerVars;
    const playerVars = settings.playerVars;
    config.playerVars = Object.assign({}, defaultVars, playerVars);
    return playerOptions;
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "") {
    const video = videoWrapper.querySelector(".video");
    if (!videoIds) {
      videoIds = video.dataset.id;
    }
    const playerOptions = createPlayerOptions(settings);
    return videoPlayer.addPlayer(video, playerOptions, videoIds);
  }

  function createCoverClickHandler(playerSettings, videoIds) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerSettings, videoIds);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler(playerSettings, videoIds);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }


  function addPlayerRandomVideo(coverSelector, playerSettings, videoIds) {
    const index = Math.floor(Math.random() * videoIds.length);
    const videoId = videoIds[index];
    const clickHandler = createCoverClickHandler(playerSettings, videoId);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }


  function init(playerOptions) {
    Object.assign(config, playerOptions);
  }

  return {
    add: addPlayer,
    addRandom: addPlayerRandomVideo,
    init
  };
}());


function onYouTubeIframeAPIReady() {
  managePlayer.init({
    playerVars: {
      autoplay: 0
    }
  });
  managePlayer.addRandom(".playa", {
    height: 207,
    start: 45,
    width: 277
  }, [
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g"
  ]);
  managePlayer.add(".playb", {
    height: 207,
    width: 277
  });

  managePlayer.addRandom(".playc", {
    height: 207,
    width: 277
  }, [
    "0dgNc5S8cLI",
    "-Xgi_way56U",
    "CHahce95B1g"
  ]);
  managePlayer.add(".playd", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playe", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playf", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playg", {
    height: 207,
    width: 277
  });
  managePlayer.add(".playh", {
    height: 207,
    width: 277
  });
  managePlayer.add(".playi", {
    height: 207,
    width: 277
  });
  manageCover.init({
    container: ".container",
    playButton: ".thePlay"
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: white;
  animation: fade 2s ease 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 310px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 20px;
  /*list-style:none;*/
  padding: 0;
}


.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}


.container {
  display: flex;
  justify-content: center;
}

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);
}

.thePlay{
  /*margin: auto 20px;*/
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  fill: blue;

}

/* when container is active hide the svg */

.container.active .thePlay {
  display: none;
}

.inner-container {
  display: none;
}



/* when container is active hide the svg and show the inner container*/

.container.active .thePlay {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

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

  100% {
    opacity: 1;
  }
}



.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 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("https://picsum.photos/id/26/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain3 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain4 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain5 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain6 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain7 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain8 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain9 {
  to {
    transform: translateX(100%);
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}
<ul class="outer">
    <li class="container">
      <svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64">
        <g id="play">
          <title>Play</title>
          <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>
      <div class="inner-container curtain curtain1">
        <div class="ratio-keeper">
          <div class="wrapa">
            <div class="video video-frame"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain2">
        <div class="ratio-keeper">
          <div class="wrapb">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container with-curtain">
      <svg class="playc thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain3">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain4">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain5">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain6">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain7">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain8">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain9">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
  </ul>

CodePudding user response:

You need to specify which elements of the SVG accept pointer events. For example adding pointer-events="none" to the top-level SVG and pointer-events="visiblePainted" to the path element or in your case, since the center blank space is empty, you can add a circle to your svg element and apply the pointer-events="visiblePainted" to it.

<svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64" pointer-events="none">
  <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>

To make sure the pointer-events="none" is passed to all your svg elements you can apply it via css.

svg.thePlay {
 pointer-events: none;
}

CodePudding user response:

In the svg you need to add a transparent circle (or path) that's equal to the icon either below or above the existing path and set its fill to transparent.

<circle fill=transparent cx="32" cy="32" r="32"/>

And then also adding a unique class to the group inside the svg. I added class="justTheIcon" to the group and that's also the class you then target in the manageCover.init function.

  manageCover.init({
    container: ".container",
    playButton: ".justTheIcon"
  });

Here's an edited example of your jsfiddle and embedded code:

const manageCover = (function makeManageCover() {
  const config = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function hideAll(elements) {
    elements.forEach(hide);
  }

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

  function coverClickHandler(evt) {
    hideAll(config.containers);
    const cover = evt.currentTarget;
    showCovers(cover);
     document.querySelector('.outer').classList.add('isOpen');
  }

  function addClickToButtons(playButtons) {
    playButtons.forEach(function addEventHandler(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);
  }

  return {
    addCoverHandler,
    init,
    show
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const players = [];

  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 addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) && videoIds;
    const playlist = Array.isArray(videoIds) && videoIds;
    const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
      playlist: playlist || undefined
    };

    config.events = {
      "onReady": onPlayerReady
    };
    const defaultOptions = config;
    const playerOptions = Object.assign({}, defaultOptions, settings);
    players.push(new YT.Player(video, playerOptions));
  }

  return {
    addPlayer
  };
}());


const managePlayer = (function makeManagePlayer() {
  const config = {
    height: 600,
    width: 360
  };
  config.playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    rel: 0
  };

  function show(el) {
    el.classList.remove("hide");
  }

  function createPlayerOptions(settings) {
    function paramInOptions(opts, param) {
      if (settings[param] !== undefined) {
        opts[param] = settings[param];
        delete settings[param];
      }
      return opts;
    }

    const optionParams = ["width", "height", "playlist", "host", "videoid"];
    const defaultOptions = config;
    const preferred = optionParams.reduce(paramInOptions, {});
    const playerOptions = Object.assign({}, defaultOptions, preferred);
    // settings should now only consist of playerVars
    const defaultVars = config.playerVars;
    const playerVars = settings.playerVars;
    config.playerVars = Object.assign({}, defaultVars, playerVars);
    return playerOptions;
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "") {
    const video = videoWrapper.querySelector(".video");
    if (!videoIds) {
      videoIds = video.dataset.id;
    }
    const playerOptions = createPlayerOptions(settings);
    return videoPlayer.addPlayer(video, playerOptions, videoIds);
  }

  function createCoverClickHandler(playerSettings, videoIds) {
    return function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show(wrapper);
      const player = createPlayer(wrapper, playerSettings, videoIds);
      wrapper.player = player;
    };
  }

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler(playerSettings, videoIds);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }


  function addPlayerRandomVideo(coverSelector, playerSettings, videoIds) {
    const index = Math.floor(Math.random() * videoIds.length);
    const videoId = videoIds[index];
    const clickHandler = createCoverClickHandler(playerSettings, videoId);
    manageCover.addCoverHandler(coverSelector, clickHandler);
  }


  function init(playerOptions) {
    Object.assign(config, playerOptions);
  }

  return {
    add: addPlayer,
    addRandom: addPlayerRandomVideo,
    init
  };
}());


function onYouTubeIframeAPIReady() {
  managePlayer.init({
    playerVars: {
      autoplay: 0
    }
  });
  managePlayer.addRandom(".playa", {
    height: 207,
    start: 45,
    width: 277
  }, [
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g"
  ]);
  managePlayer.add(".playb", {
    height: 207,
    width: 277
  });

  managePlayer.addRandom(".playc", {
    height: 207,
    width: 277
  }, [
    "0dgNc5S8cLI",
    "-Xgi_way56U",
    "CHahce95B1g"
  ]);
  managePlayer.add(".playd", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playe", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playf", {
    height: 207,
    width: 277
  });

  managePlayer.add(".playg", {
    height: 207,
    width: 277
  });
  managePlayer.add(".playh", {
    height: 207,
    width: 277
  });
  managePlayer.add(".playi", {
    height: 207,
    width: 277
  });
  manageCover.init({
    container: ".container",
    playButton: ".justTheIcon"
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 310px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 20px;
  /*list-style:none;*/
  padding: 0;
}


.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}


.container {
  display: flex;
  justify-content: center;
}

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);
}

#play{
  /*margin: auto 20px;*/
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  fill: blue;

}

/* when container is active hide the svg */

.container.active .thePlay {
  display: none;
}

.inner-container {
  display: none;
}



/* when container is active hide the svg and show the inner container*/

.container.active .thePlay {
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curtain {
  display: block;
}

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

  100% {
    opacity: 1;
  }
}



.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%;
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px);
  /* rounding error fix */
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 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("https://picsum.photos/id/26/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.curtain3 .panel-left::before,
.curtain3 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain3 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain4 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain5 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain6 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain7 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain8 {
  to {
    transform: translateX(100%);
  }
}

@keyframes curtain9 {
  to {
    transform: translateX(100%);
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}
<ul class="outer">
    <li class="container">
      <svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64">
        <g id="play" class="justTheIcon">
          <title>Play</title>
          <circle fill=transparent cx="32" cy="32" r="32"/>
          <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>
      <div class="inner-container curtain curtain1">
        <div class="ratio-keeper">
          <div class="wrapa">
            <div class="video video-frame"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain2">
        <div class="ratio-keeper">
          <div class="wrapb">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container with-curtain">
      <svg class="playc thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain3">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain4">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain5">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain6">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain7">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain8">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
    <li class="container">
      <svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64">
        <use href="#play" />
      </svg>
      <div class="inner-container curtain curtain9">
        <div class="ratio-keeper">
          <div class="wrapc">
            <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
          </div>
          <div class="panel-left"></div>
          <div class="panel-right"></div>
        </div>
      </div>
    </li>
  </ul>

  • Related