[徳本 奈穂子]

【お使いの Snow Monkey のバージョン】14.3.5
【お使いの Snow Monkey Blocks のバージョン】
【お使いの Snow Monkey Editor のバージョン】
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://herown.life/2021/09/11/10minutes-music-diary-vol1-10/

### 発生している問題

不具合かどうかわからないのですが、投稿にSpotifyを埋め込んだ時に、Spotifyの下に空白が入ってしまいます。

空白を削除する方法はないでしょうか？

### 試したこと

該当のクラスを探しましたがよくわかりませんでした。

♥ 0

いいねをした人: 居ません

[GONSY]

徳本奈穂子さん、こんにちは。

.c-responsive-container-4-3 {
padding-bottom: 75%;
}

この数字を変更すれば、空白は調整できると思います。
ただ、番組と曲のボックス？のアスペクト比が異なるので、上記の数値にすると、曲の高さが小さくなり、ジャケット画像も小さくなってしまいます。

これを避ける1つの方法として、番組のSpotifyブロックにクラス（例：radio-program）を追加して、以下のようにすれば、番組ボックスのみ空白を取り除くことができると思います。
※もっと良い方法が見つかるといいのですが・・・

.radio-program .c-responsive-container-4-3 {
padding-bottom: 30%; /*調整が必要*/
}

以下、Chrome・デベロッパーツールで再現してみました。

♥ 1

いいねをした人:

[徳本 奈穂子]

GONSYさん、ご回答ありがとうございます！！

モニタサイズによって見え方が違うので、ブレイクポイントごとにpaddingを調整して、ほぼ狙い通りの表示になりました。

私としては解決できたのですが、今後実装していただける可能性があるのであればこのトピックは閉じない方がいいでしょうか？

一度閉じた方が良いでしょうか？

お手数ですがご教示いただけないでしょうか。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

徳本さんご報告ありがとうございます！
GONSY さん調査ありがとうございます！

根本的な問題として、4:3にする必要がないのに .c-responsive-container-4-3 で囲まれているのがダメということですよね。これ YouTube などの動画サービスやスライド共有サービス向けに自動的にアスペクト比を良い感じにするようにするためのものなので、今回の場合は Snow Monkey 側で囲まれないようにするのが良いのかなと思います。

徳本さん、僕の方でもテストしてみたいと思いますので、可能でしたらテストページに埋め込まれている oEmbed の URL（それをはったら埋め込みに変換される URL）を共有いただけないでしょうか？

♥ 0

いいねをした人: 居ません

[徳本 奈穂子]

キタジマさん、お返事ありがとうございます！

“https://open.spotify.com/episode/5zTuDZmZXOGTPZlqFciOQO?si=I5mcMEsHQwiX2jtnwUkjWw&dl_branch=1”

こちらのURLです。

(自動的に変換されてしまうのでダブルクオーテーションで囲っています。)

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

♥ 1

いいねをした人:

[キタジマ タカシ]

v15.8.1 で変更を入れてみました。確認してみてください！

♥ 1

いいねをした人:

[徳本 奈穂子]

キタジマさん、素早くご対応いただいていたのにお返事遅くなり申し訳ありません！

理想通りの表示になっております！

ありがとうございました！

(クローズさせていただきます。

♥ 1

いいねをした人:

[投稿者]

投稿