此代码不会在博客上工作，问题是什么，我该如何修复它？

Question

在这里工作：

https://jsfiddle.net/uyor8sqh/2/

但它不在这里工作：

https://testing453453.blogspot.com/

封面图片（点击它）

然后你应该看到这个：

我相信问题是， CSS ，但我不知道如何让它在博主上工作。

非常感谢所有帮助。

＆＃13;

＆＃13;

(function iife() {
  "use strict";

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

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

  function upTo(el, selector) {
    while (el.matches(selector) === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    button.querySelectorAll(".playa, .pausea, .initialb, .pauseb, .speakerb, .playb, .playca, .playcb, .playcc, .pauseca, .pausecb, .pausecc, .playd, .paused, .playe, .pausee, .playf, .pausef").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playca, .playcb, .playcc, .playd, .playe, .playf");
  }

  function getPause(button) {
    return button.querySelector(".pausea, .pauseb, .pauseca, .pausecb, .pausecc, .paused, .pausee, .pausef");
  }

  function hideInitialOverlay(wrapper) {
    wrapper.classList.remove("inactivee");
    wrapper.classList.add("activee");
    hide(wrapper.querySelector(".covere"));
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("activea");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hide");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButtona, .playButtonb, .playButtonc, .playButtond, .playButtone, .playButtonf");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    player.setAttribute("src", src);
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

  function togglePlayButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    showButton(button, {
      playing
    });
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    var button = upTo(evt.target, ".playButtone");
    togglePlayButton(button);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrape");
    var button = wrapper.querySelector(".playButtone");
    hideInitialOverlay(wrapper);
    showPlayButton(button);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButtone");
    wrapper.classList.add("inactivee");
    wrapper.addEventListener("click", initialOverlayClickHandler);
    hideAllButtons(button);
  }
  initButton(".wrape");
}());

＆＃13;

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.wrape a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape a:hover {
  border: 3px solid red;
}

.wrape li:nth-of-type(5n) a {
  margin-right: 0;
}

.wrape .ap a {
  opacity: 0;
  border: none;
  background: none;

  
}

.wrape .grade a {
  border: none;
  background: none;
}

.content {
  position: relative;
  height: 50px;
  width: 50px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  
}

.left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 44px;
  background: rgba(0, 255, 255, 0.5);
}

.left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.middle-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 14px;
  height: 44px;
  background: rgba(255, 255, 255, 0.5);
}

.right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.right-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 44px;
  background: rgba(255, 0, 255, 0.5);
}

.inactivee a {
  display: none;
}

.inactivee .playButtone {
  display: none;
}

.covere {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.covere {
  display: none;
}

.inactivee .covere {
  display: block;
}

.covere::before,
.covere::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 86px;
  width: 3px;
  height: 168px;
  background: #0059dd;
}

.covere::after {
  left: 177px;
}

.nave {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nave li {
  float: left;
}

.activee .playButtone {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  fill: #aaff00;

 
}

.activee {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  right: 0;
  margin: auto;

}

.pausee {
  left: 0;

}

.hide {
  display: none;
}

＆＃13;

<audio></audio>

<div class="wrape">
  <div class="covere" title="OPEN"></div>
  <ul class="nave">
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li class="ap"><a> Audio Player</a></li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li class="grade">
      <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="content">
          <div class="left-background"></div>
          <div class="left-border"></div>
          <div class="middle-background"></div>
          <div class="right-border"></div>
          <div class="right-background"></div>
        </div>
      </a>
    </li>
  </ul>

  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">


    <svg class="playe hide" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>
    <svg class="pausee hide" focusable="false" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>

Click on the image to open it.

＆＃13;

＆＃13;

＆＃13;