How come it gets cut off, and how do I fix that?

Also, why would it be cut off on one but not the other?

Code:

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; border: 3px solid #E77D19; border-radius:0px;font-family:Tahoma; font-weight: bold;font-size:30px; color:#E77D19;"
onclick="  
var button = document.getElementById('playButton');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
   playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' 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\'></svg>';
    player.play();
playButton2.style.border='none' 
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  } else {
 playButton2.innerHTML = '<svg width=\'100\' height=\'100\' style=\'color:#E77D19;\' viewBox=\'0 0 60 100\'><path fill=\'currentColor\' 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\'></svg>';
    player.pause();
playButton2.style.border='none'
playButton2.style.boxShadow='inset 0 0 0 3px #E77D19'
playButton2.style.backgroundImage = 'url(\'http://via.placeholder.com/266x266\')';
  }">
  <svg width="100" height="100" style="color:#E77D19;" viewBox="0 0 85 100">
    <path fill="currentColor" 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">
  </svg>
</button>

<audio id="player2" style="display:none;">
  <source src='' type='audio/mpeg' />
  </source>
</audio>

Fixed:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.