防止svg從視頻播放器上滑落 -有解無憂

當YouTube視頻變小時，svg開始從上面滑落。

當視頻變小時，這種情況就會發生。

我如何防止這種情況的發生？

const manageCover = (function makeManageCover（） {
  const config = {};

  function show（el） {
    el.classList.remove("hide"/span>)。
  }

  function hide（el） {
    el.classList.add("hide"/span>)。
  }

  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）。
  }

  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,
    顯示
  };
}());

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); // percent
  }


  function addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) & & videoIds;
    const playlist = Array.isArray(videoIds) && videoIds.join() 。
    const defaults = {
      playerOptions: {
        events: {
          "onReady": onPlayerReady
        },
        height: 360,
        host: "https://www.youtube-nocookie.com"。
        playerVars: {
          playlist: playlist || undefined。
        },
        videoId,
        width: 640 const defaultOptions = defaults.playerOptions;
    const defaultVars = defaultOptions.playerVars;
    const playerVars = settings.playerVars;
    const playerOptions = Object.assign（{}, defaultOptions, settings）。
    playerOptions.playerVars = Object.assign（{}, defaultVars, playerVars）。
    const player = new YT.Player（視頻，playerOptions）。
    players.push（player）。
    return player。
  }

  return {
    addPlayer
  };
}());

const managePlayer = (function makeManagePlayer() {
  const defaults = {
    playerOptions: {
      playerVars: {
        autoplay: 1,
        controls: 0,
        disablekb: 1,
        enablejsapi: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0, rel.
      }
    }
  };

  function show（el） {
    el.classList.remove("hide"/span>)。
  }

  function createPlayerOptions（settings） {
    const defaultOptions = defaults.playerOptions;
    const playerOptions = defaultOptions.playerVars;
    const playerVars = Object.assign（{}, playerOptions, settings）。
    playerOptions.playerVars = playerVars;
    return playerOptions。
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "" ) {
    const video = videoWrapper.querySelector(".video") 。
    if (!videoIds) {
      videoIds = video.dataset.id。
    }
    const playerOptions = createPlayerOptions（設定）。
    return videoPlayer.addPlayer（視頻，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(defaults.playerOptions, playerOptions) 。
  }

  return {
    add: addPlayer。
    addRandom: addPlayerRandomVideo,
    激活
  };
}());

function onYouTubeIframeAPIReady(/span>) {
  managePlayer.init（{
    playerVars: {
      controls: 1,
      fs: 0, fs.
    }
  });
  managePlayer.addRandom(" .playa", {
    start: 45。
  }, [
    "0dgNc5S8cLI"/span>,
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g".
  ]);
  managePlayer.add(".playb", {}, [
    "0dgNc5S8cLI"/span>,
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g".
  ]);
  managePlayer.add(".playc"/span>, {
    start: 45.
  });
  manageCover.init（ {
    container: ".container",
    playButton: ".thePlay"。
  });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forward;
}
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.container {
  display: flex;
  justify-content: center;
}
.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forward;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000) 。
    linear-gradient(black 10px, #0000 10px 160px, black 160px）,)
    linear-gradient(90deg, black10px, #0000 10px 160px, 黑色160px),
    linear-gradient(橙色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, black20px, #0000 20px 150px, 黑色150px),
    linear-gradient(teal 25px, #0000 25px 145px, teal 145px) 。
    linear-gradient(90deg, teal 25px, #0000 25px 145px, 茶色145px）。)
    linear-gradient(black 30px, #0000 30px 140px, black 140px）,)
    linear-gradient(90deg, black 30px, #0000 30px 140px, 黑色140px),
    linear-gradient(橙色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, black40px, #0000 40px 130px, 黑色130px),
    linear-gradient(teal 45px, #0000 45px 125px, teal 125px）。)
    linear-gradient(90deg, teal 45px, #0000 45px 125px, 茶色125px）。)
    linear-gradient(black 50px, #0000 50px 120px, black 120px）。)
    linear-gradient(90deg, black50px, #0000 50px 120px, 黑色120px),
    linear-gradient(橙色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, 茶色105px）。)
    linear-gradient(black 70px, #0000 70px 100px, black 100px）,)
    linear-gradient(90deg, black70px, #0000 70px 100px, 黑色100px),
    linear-gradient(橙色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, black80px, #0000 80px 90px, 黑色90px),
    linear-gradient(teal, teal)。
}
/* 當容器被激活時，隱藏SVG */。
.container.active .thePlay{
  display: none;
}

.inner-container {
  display: none;
}
/* 當容器處于活動狀態時，隱藏svg并顯示內部容器*/。
.container.active .thePlay{
  display: none;
}
.container.active .inner-container {
  display: flex;
}
.container.active .inner-container.curbtain {
  display: block;
}

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

  100% {
    opacity: 1;
  }
}

.playa,
.playb,
.playc {
  margin: auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: 指標。
  flex-shrink: 0;
}

.playa {
  填充：紅色。
  filter: 滴影(3px 3px 3px rgba(0, 0, 0, 0. 7））。)
}

.playb {
  填充：藍色。
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0. 7））。)
}

.playc {
  填充：橙色。
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0. 7））。)
}

svg.thePlay {
 pointer-events: none;
}

.home {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 50px;
  height: 50px;
 填充：綠色。
 cursor: pointer;
}

.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%。
}
.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px); /*舍入錯誤修復 */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  背景-位置：中心；*/
  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") 。
}

.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%）。
  }
}

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

<div class="outer" > 
  <div class="container with-curtain"/span>>
    < svg class="playa thePlay" width="64" /span> 高度="64" viewBox="0 0 64 64" pointer-events="無" > 
      <g id="play"> 
        <title>/span>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>/span>
    <div class="inner-container curtain1"> 
      <div class="rate-keeper">
        <div class="wrapa"/span>>
          <div class="video video-frame"/span>> </div>>
          < svg class="home" width="100" 高度="100" viewBox="0 0 24 24" fill="green"> 
            <g id="home"> 
              <title>/span>Home</title>
              <path d="M3 10.25V20C3 20.5523 3.44771 21 4 21H8.42857C8.98086 21 9.42857 20。 5523 9.42857 20V13.2857H14.5714V20C14.5714 20.5523 15.0191 21 15.5714 21H20C20.5523 21 21 20.5523 21 20V10.25C21 9.93524 20.8518 9.63885 20.6 9.45L12 3L3.4 9.45C3.14819 9.63885 3 9.93524 3 10. 25Z" stroke="red" stroke-width="1. 5" stroke-lineecap="round" stroke-linejoin="round"> </path>>
            </g> 
          </svg>/span>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playb thePlay" width="100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain2"> 
      <div class="rate-keeper">
        <div class="wrapa"/span>>
          <div class="video video-frame"/span>> </div>>
          < svg class="home"/span> width="100%" height="100%" viewBox="0 0 24 24"> 
            <use href="#home" /> 
          </svg>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playc thePlay" width="100%""100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain3"> 
      <div class="rate-keeper">
        <div class="wrapa"/span>>
          < div class="video video-frame" data-id="qe5WF4qCSkQ"> </div>
          < svg class="home"/span> width="100%" height="100%" viewBox="0 0 24 24"> 
            <use href="#home" /> 
          </svg>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

對于你的情況，使用百分比更好，在.home css樣式中，將top: 200px改為top: calc(60% - 25px)。

.home {
  position: absolute;
  top: calc(60% - 25px); /*25px 是 svg*/的一半高度
  left: 0px;
  width: 50px;
  height: 50px;
 填充：綠色。
 cursor: pointer;

calc()是做什么的。https://developer.mozilla.org/en-US/docs/Web/CSS/calc()

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/320116.html

標籤：

上一篇：改變文本的顏色，或將其顯示在路徑的頂部，這樣路徑就不會覆寫它。

下一篇：當符號有設定的大小和相對位置時縮放SVG