title: This code won't work on blogger, what's the issue, and how do I fix it?
body: <p><strong>It works here:</strong></p>
  
  <p><a href="https://jsfiddle.net/uyor8sqh/2/" rel="nofollow noreferrer">https://jsfiddle.net/uyor8sqh/2/</a></p>
  
  <p><strong>But it's not working here:</strong></p>
  
  <p><a href="https://testing453453.blogspot.com/" rel="nofollow noreferrer">https://testing453453.blogspot.com/</a></p>
  
  <p>Cover Image (You click on it)</p>
  
  <p><a href="https://i.stack.imgur.com/HlFyL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlFyL.png" alt="enter image description here"></a></p>
  
  <p>Then You should See This:</p>
  
  <p><a href="https://i.stack.imgur.com/tdg5I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tdg5I.png" alt="enter image description here"></a></p>
  
  <p>I believe what the issue is, is the <strong>CSS</strong>, but I don't know how to get it working on blogger.</p>
  
  <p>All help would be greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(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");
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio&gt;&lt;/audio&gt;
  
  &lt;div class="wrape"&gt;
    &lt;div class="covere" title="OPEN"&gt;&lt;/div&gt;
    &lt;ul class="nave"&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="ap"&gt;&lt;a&gt; Audio Player&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#" target="_blank" title=""&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="grade"&gt;
        &lt;a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"&gt;
          &lt;div class="content"&gt;
            &lt;div class="left-background"&gt;&lt;/div&gt;
            &lt;div class="left-border"&gt;&lt;/div&gt;
            &lt;div class="middle-background"&gt;&lt;/div&gt;
            &lt;div class="right-border"&gt;&lt;/div&gt;
            &lt;div class="right-background"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="playButtone" data-audio="http://hi5.1980s.fm/;"&gt;
  
  
      &lt;svg class="playe hide" focusable="false" width="38" height="40" viewbox="0 0 85 100"&gt;
        &lt;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"&gt;
          &lt;title&gt;PLAY&lt;/title&gt;
        &lt;/path&gt;
      &lt;/svg&gt;
      &lt;svg class="pausee hide" focusable="false" width="36" height="40" viewbox="0 0 60 100"&gt;
        &lt;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"&gt;
          &lt;title&gt;PAUSE&lt;/title&gt;
        &lt;/path&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  Click on the image to open it.</code></pre>
  </div>
  </div>
  </p>