<div class="audio-container onnetworkcustomplayercontainer" id="testowykontenercpl">
  <div class="title onnetworkcustomplayertitle"></div>
  <div class="audio-player">
    <button class="audio-btn playpause-button onnetworkcustomplaypausebutton"
    >
      <svg class="play">
        <!-- PLAY ICON SVG PATHS -->
      </svg>
      <svg class="pause">
        <!-- PAUSE ICON SVG PATHS -->
      </svg>
    </button>

    <div class="seek-bar-timeline onnetworkcustomplayerplaybarcontainer">
      <div class="seek-bar-line onnetworkcustomplayerplaybar"></div>
      <div class="seek-bar-dot onnetworkcustomplayerplayhead"></div>
    </div>

    <button class="audio-btn mute-button onnetworkcustommutebutton">
      <svg class="muteicon">
        <!-- MUTE ICON SVG PATHS -->
      </svg>
      <svg class="unmuteicon">
        <!-- UNMUTE ICON SVG PATHS -->
      </svg>
    </button>
  </div>
</div>
<script type="text/javascript" src="https://video.onnetwork.tv/embed.php?sid=XXXXXXXXXX==&isCpl=1&cpcId=testowykontenercpl"></script>

.audio-container {
  width: 99%;
  min-width: 220px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border-radius: 0px;
  padding: 5px;
  border: 1px solid black;
  flex-wrap: wrap;
}
.title {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  padding: 5px 0 0 5px;
  font-family: sans-serif;
}
.audio-player {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.audio-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 25px;
  height: 25px;
}
.seek-bar-timeline {
  width: 95%;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  position: relative;
  cursor: pointer;
  background-color: black;
}
.seek-bar-line {
  height: 4px;
  background-color: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.seek-bar-dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.playpause-button {
  display: block;
  background-size: 100%;
  margin: 0;
  width: 25px;
  height: 25px;
  transition: 0.1s;
  background-repeat: no-repeat;
}
.playpause-button svg {
  display: none;
  pointer-events: none;
}
.playpause-button.paused svg.pause,
.playpause-button.playing svg.play {
  display: none;
}
.playpause-button.paused svg.play,
.playpause-button.playing svg.pause {
  display: block;
}
.mute-button {
  display: block;
  background-size: 100%;
  margin: 0;
  width: 25px;
  height: 25px;
  transition: 0.1s;
  background-repeat: no-repeat;
}
.mute-button svg {
  display: none;
  pointer-events: none;
}
.mute-button:not(.muted) .muteicon,
.mute-button.muted .unmuteicon {
  display: block;
}
.mute-button:not(.muted) .unmuteicon,
.mute-button.muted .muteicon {
  display: none;
}