Mini embed audio player

Hi everyone, 

I'm trying to customize the embedded audio player. I need it to be very small (or even only the play button), like a pill to be very close to the text. It's only for some blog posts that I would need to be like this.

I don't need the title or any other information, only the play /pause button. I looked online but didn't find any information.

Hi,

Can you share link to page where you have problem? We can check easier

Hi Tuan,

https://www.frencholistic.com/posts/best-french-phrases-travel

Someone helped me, but there are still issues. Some audio players change their shape when we resize the window, which should not happen.

I would have liked all the audio players near the text (with a small space in between)

Hi Tuan. Thank you for being so helpful. It worked very well.

I have two questions:

- why can't I have all the players next to the text? Some are close, and some other very far.

- if I want to reuse this kind of player for other posts, can I just duplicate this post or do I need to update something in the code with the ID of the post?

#1. I don't know this

#2. Use this new code

.sqs-audio-player {
    background-color: unset !important;
    box-shadow: unset !important;
    border: none !important;
}
.sqs-audio-player .controls {
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,.8);
}

It will apply all pages

Hi Tuan, I'm sorry for the confusion. I want this kind of mini audio player only for SOME posts, not all.

On 4/12/2023 at 1:20 AM, Chrystele said:

Hi Tuan, I'm sorry for the confusion. I want this kind of mini audio player only for SOME posts, not all.

You can edit the page where you want to apply > Add a Code Block (anywhere) > Paste this code

<style>
  .sqs-audio-player {
    background-color: unset !important;
    box-shadow: unset !important;
    border: none !important;
}
.sqs-audio-player .controls {
    border: 1px solid black;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,.8);
}
</style>