AppleMusicの埋め込みタグで横幅がはみ出てしまうときの対処法(レスポンシブサイトでのiPhoneアクセス)
こんにちは、チッタです。
先日、音楽アルバムの紹介記事を書いたときにAppleMusicの埋め込みタグを使いました。
公開後、iPhoneでアクセスしたら横幅がおかしなことに(-_-)
Chromeのモバイルシミュレーターではちゃんとなっていたのに、iPhoneの実機では完全に横幅がはみ出していました。
「これはいかん！」ということでチッタ調査隊が出動し、はみ出さない方法を突き止めました。
ちなみに、使用したAppleMusicの埋め込みタグ生成ツールはこちらです。
今回試したものの詳しい情報
WordPress
WordPress 4.9.9
デスクトップ
Google Chrome 71.0.3578.98
スマホ
iPhoneSE
iOS12.0.1
safari12.0
方法
この方法は、AppleMusicが仕様を変更した場合不具合が出る可能性があるので自己責任でお願いします。
「scrolling=”no”」を追記する
iframeタグの中に「scrolling=”no”」を追記します。
style属性の内容を変更する
iframeタグの中に書いてある
を
に変更します。
完成したコードの例
「src=”https://~”」のところはご自身で選曲したURLです。
上記のコードはこのように表示されます。
Chromeで表示されないときは、設定の「サードパーティの Cookie をブロックする」の下にある「許可」の右側にある「追加」ボタンを押して、https://embed.music.apple.comを追加してくだい。
なぜこのように書きかえたらはみ出すことなく表示するのか私にはよくわかりませんでした。
プログラマの道は続きます。