<style>
.button div {
width: 38px;
height: 38px;
top: 76px;
left: 111px;
background-color: transparent;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
}
</style>
<div id="playButton7" style="position:relative;border: 3px solid #0059dd;margin-top:8px;background-color:black;width: 260px; height: 194px;cursor: pointer;" onclick="
var button = document.getElementById('playButton7');
var player = document.getElementById('player7');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">
<svg width="260" height="194">
<defs>
<clippath id="circleView">
<circle cx="130" cy="97" r="85" fill="orange"></circle>
</clippath>
</defs>
<image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"> </image>
<image x="40" y="7" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png"></image>
<svg width="260" height="194">
<defs>
<lineargradient id="MyGradient">
<stop offset="0%" stop-color="transparent"></stop>
<stop offset="31.9%" stop-color="transparent"></stop>
<stop offset="31.9%" stop-color="#0059dd"></stop>
<stop offset="33.2%" stop-color="#0059dd"></stop>
<stop offset="33.2%" stop-color="transparent"></stop>
<stop offset="66.8%" stop-color="transparent"></stop>
<stop offset="66.8%" stop-color="#0059dd"></stop>
<stop offset="68.1%" stop-color="#0059dd"></stop>
<stop offset="68.1%" stop-color="transparent"></stop>
<stop offset="100%" stop-color="transparent"></stop>
</lineargradient>
</defs>
<rect fill="url(#MyGradient)" x="0" y="0" width="260" height="194"></rect>
</svg>
</svg>
<div class="button">
<div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
</div>
<div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
</div>
</div>
</div>
<audio id="player7" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</source>
--------------------------
<style>
.button div {
width: 44px;
height: 44px;
top: 102px;
left: 116px;
background-color: transparent;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
}
</style>
<div id="playButton5" style="position:relative;width: 266px; height: 250px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 0,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent 177px, #0059dd 177px, #0059dd 180px, transparent 180px, transparent 266px), url('https://i.imgur.com/DrNBAbe.png');box-Shadow:inset 0 0 0 3px #0059dd;background-repeat: no-repeat;"
onclick="
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .pause').style.display='none';
document.querySelector('#playButton5 .play').style.display='inline-block';
player.pause();
}">
<svg width="266" height="250" viewbox="0 0 266 150">
<circle cx="138" cy="74" r="24.5" stroke-width="6" fill="orange"></circle>
<line x1="6" y1="75" x2="32" y2="75" stroke="#f00" stroke-width="6"></line>
<line x1="39" y1="75" x2="111" y2="75" stroke="#f00" stroke-width="6"></line>
<line x1="86" y1="44" x2="192" y2="105" stroke="#f00" stroke-width="6"></line>
<line x1="137" y1="12" x2="137" y2="136" stroke="#f00" stroke-width="6"></line>
<line x1="86" y1="105" x2="192" y2="44" stroke="#f00" stroke-width="6"></line>
<line x1="152" y1="51" x2="188" y2="-12" stroke="#f00" stroke-width="6"></line>
<line x1="191" y1="-17" x2="205" y2="-40" stroke="#f00" stroke-width="6"></line>
<line x1="151" y1="98" x2="188" y2="161" stroke="#f00" stroke-width="6"></line>
<line x1="191" y1="166" x2="205" y2="188" stroke="#f00" stroke-width="6"></line>
<circle cx="138" cy="74" r="24.5" stroke="red" stroke-width="6" fill="black">
</circle>
</svg>
<div class="button">
<div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;background-size: 16px 20px;">
</div>
<div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;background-size: 16px 20px;display: none;">
</div>
</div>
<audio id="player5" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
</div>
</audio>
You have the closing audio tag in the wrong place.
See if you can find it yourself.
I got it.
There you go 
Why is the play button on the first code not in the middle?
If the code is by itself, it is in the middle.
How do I fix that?
Code by itself:
But when it’s on the same page with another player, the play button moves out of the center.
You do know how css works don’t you?
You have these rules in your page:
.button div {
width: 38px;
height: 38px;
top: 76px;
left: 111px;
background-color: transparent;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
}
.button div {
width: 44px;
height: 44px;
top: 102px;
left: 116px;
background-color: transparent;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
position: absolute;
}
You over-ride the first set of rules with the second. As your elements are different sizes and different positions then its clear you can’t use the same code for both. This is basic CSS and its cascading nature.
Use a different classname for each to keep them separate or target via a parent id.
e.g.
#playButton7 .button div {etc...}
#playButton5 .button div {etc...}
These points were all mentioned in your other thread.
1 Like
ok, I got it now. that’s why that happened.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.