モバイルフレンドリーのアルゴリズム変更のおかげで、レスポンシブ案件が
モリモリのやまだです(=ﾟωﾟ)ﾉ

どもども。お久しぶりの更新でございます。
前回、複数のYouTube動画をページを変えず、そのエリアで切替えて再生（IFrame編）という記事を書きましたら、これをレスポンシブ対応したいというお問い合わせがきましたので、やってみました。

YouTube動画の画面が、私のAndroidくんだとただ真っ黒に表示するだけになってしまうので、これを修正。
さらに、画面がはみ出してレイアウトが崩れてしまうのでこれも調整します。

まずは、jsファイルの見直し。
どうやら「iframe 組み込みの YouTube Player API リファレンス」のモバイルの注意事項にあるように、モバイルでは開いた瞬間に自動再生させないようなのでイベントで自動再生させないように、47行目あたりをコメントアウト。
最初に開いた瞬間の自動再生はできませんが、これで画面が表示され、曲リストクリックすると自動再生されます。

次にレイアウト。
CSSで動画（iframe）をレスポンシブ化させます。
id=”player”に画面が表示されるので、それをclass=”movie_center”で囲って下さい。こんな感じ

<div class="movie_center">
<div id="player"></div>
</div>

CSSはこれ↓

.movie_center {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 0 auto 24px 0;
}
.movie_center iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これでこいつも↓レスポンシブになったはず！

あ！このサイトがレスポンシブじゃなかった。ダメじゃんw
こちらをご覧ください！

近々、スマホ対応しますのでお待ちを(ほんとに～？)

スマホ対応、レスポンシブにしました！！