お世話になります。

先日から利用させていただいております。

表題の件ですが、こちらのページの吹き出しの中に音声ファイルを挿入しました。

PCでのプレビュー画面では問題ないのですが、スマホで開いたときに再生プレイヤーの幅がページの幅よりも広くなっている状態です。

※添付画像のようにページを横にスワイプするか、ピンチで縮小しないと読めません。

音声ファイルを入れるまでは幅が固定されていたので、テキストには問題ないかと思われます。

やってみたこと

◆audioタグに直接widthで幅を指定

<p>[audio m4a="https://yuchanne-fr.com/wp-content/uploads/2020/03/Bonjourjemappelleyuchanne.m4a" width: 100%;][/audio]</p>

◆スタイルシートに追加

/*480px以下*/

@media screen and (max-width: 480px){

audio { width: 300px; }

  /*必要ならばここにコードを書く*/

}

どちらも変化がありませんでした。

どうやったら吹き出しの中に音声ファイルを挿入した状態で横幅を固定できるでしょうか。

また、音声ファイルは「メディアを追加」からアップロードしているだけですが、上記のようにタグが通常の<>ではなく[]になっています。

音声ファイルの横幅を固定できない理由として上記も関係しているのでしょうか。

初歩的な質問でしたら申し訳ございません。

調べても出てこなかったので質問させていただきました。

よろしくお願いいたします。