Apple Musicをブログに貼り付けたい！埋め込みコード探してみた

Appleが手がける定額制音楽配信サービスApple Musicがスタートして、早一ヶ月が経ちました。

Apple Musicの利用者数は1ヶ月で1100万人を突破したと発表されていることからも、
Apple Musicが持つポテンシャルの高さを充分垣間見れますね。

利用登録していなくてもApple Musicが投稿する一部のアーティストのMVや音源は
見たり、聴くことができます。

Apple Music限定配信で公開されているMVも出てきて、YouTubeで検索しても、
アーティスト公式アカウントからはアップされていないMVがあります。

たとえば、”The Black Eyed Peas – Yesterday”、
“Puff Daddy ft. Pharrell Williams – Finna Get Loose”などです。

せっかくヤバいMVや曲に出会ってもApple Musicにはシェアするためのボタンも
ブログに貼り付けるための埋め込みコードも今のところありません。

埋め込む方法を探したら、Apple Musicを埋め込む方法が分かったので、
同じようにApple Musicをブログに貼り付けたい方用に情報をシェアします。

Apple Music埋め込みコード

Apple Music限定配信されているMVをブログに貼り付ける方法は”iframe”を使います。

今回は、”The Black Eyed Peas – Yesterday”を元に書いていきます。

“iframe”を使う

Apple Musicが投稿したMVのURLをまずコピペします。

今回は、https://itunes.apple.com/us/post/idsa.a2de5827-2ca3-11e5-adfd-3218526430a0

<iframe src="https://itunes.apple.com/us/post/
idsa.a2de5827-2ca3-11e5-adfd-3218526430a0" 
width="640px" height="360px" frameborder="0" scrolling="yes">
</iframe>

コピペしたURLをそのまま貼り付けてみても、これだとスクロールはしないといけないし、
MVを再生するまでにクリックが２回も必要で、ユーザービリティがよくありません。

１クリックで再生させたい

MVを再生するまでを１クリックで済ませるためにURLを一部変更します。

変更後、埋め込みコードはこうなります。

<iframe src="https://itunes.apple.com/embedded-player/
idsa.a2de5827-2ca3-11e5-adfd-3218526430a0" 
width="640px" height="360px" frameborder="0" 
scrolling="no" allowfullscreen>
</iframe>

１クリックでMVが再生されるようになり、何度もクリックしてたどり着いてもらうよりもユーザービリティは良いです。

でも、このままだとレスポンシブ対応していないため、スマホからアクセスすると画面をハミ出ます。

レスポンシブ対応でスマホでも見やすく

レスポンシブ対応してモバイルユーザービリティをよくするために、CSSへ追加して”div”で囲みます。

/*iframe レスポンシブ*/
.iframe-content {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 4px;
}
.iframe-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="iframe-content">
<iframe src="https://itunes.apple.com/embedded-player/
idsa.a2de5827-2ca3-11e5-adfd-3218526430a0" 
width="640px" height="360px" frameborder="0" 
scrolling="no" allowfullscreen>
</iframe>
</div>

上記コードでレスポンシブ対応してスマホでも画面幅で表示してくれるようになります。

スマホ縦持ちの場合、再生ボタンを押そうとすると、Apple Musicへのリンクボタンが押されてしまします。

横持ちに変えると、押し間違いを防いで、再生できます。

スマホでみたときに動画が左寄せで右側に若干真っ黒なスペースが発生します。

気になってサイズの調整をして真っ黒なスペースを無くそうとしてみましたが、消せなかったです。

ここはこうしたほうがいいよとアドバイスがあったら教えてください。

まとめ

とりあえず今回の方法でレスポンシブ対応しつつApple Musicから動画を埋め込むことが可能です。

Appleサイドで埋め込みコードを用意してくれたら本当に楽なんですけど、
ないものはないんでしょうがありません。

Apple Musicで公開されているMVのアーティスト本人もTwitterやFBでURL貼ってつぶやいてるし、
ブログに貼り付けても多分大丈夫だろうけど、あくまで自己責任でよろしくお願いします。