YouTubeに動画をアップし、その動画をPCサイトに掲載、ここであまりつまづく人は、いないかな～と思いますが、スマホサイトにも掲載されているつもりだったのに、ある日、iphoneユーザーの友人から、「動画ないね、真っ白やね～」なんて言われて、びっくり！という方、日本中に７人くらいは、いるのでは？

はい。私がその７人中の１人です。　

と、いうことで、国内にあと６人ぐらいはいるであろう私と同志のあなたに向けて、張り切ってご紹介します～。

 

スマートフォン用のサイトでyoutube動画を埋め込むとき、以前使われていたコード（object）で埋め込むと、iPhoneのブラウザ（safari）で見られない場合があります。

スマートフォンブラウザでも見られるようにするために、下記の方法をご紹介します。

（１）動画の埋め込みコード
（２）埋め込みオプション
（３）動画の表示サイズ

▼まず、埋め込みたい動画のページに移動し、動画の下部にある【共有】（青枠）をクリックします。
クリックすると埋め込みコードの設定エリアが表示されます。

▼     動画の埋め込みコードを取得する際に、（２）の埋め込みオプションの

【動画が終わったら関連動画を表示する】
【プライバシー強化モードを有効にする】

にチェックを入れる。
（【以前の埋め込みコードを使用する】にチェックを入れると古いコード（object）になってしまうので入れないでください。）

▼（１）の埋め込みコードを、（３）の動画の表示サイズを指定するタグを削除してから、コピーします。

例）
<iframe src=”//www.youtube-nocookie.com/embed/0pZNJd4YGVQ” frameborder=”0″ allowfullscreen></iframe>

（スマートフォンから見たときに動画の表示サイズを可変させるために動画の表示サイズタグを削除します。このタグを残していると表示サイズを優先させて、モニタサイズをはみ出して表示させる場合があるからです。）

▼PC、スマートフォン、どちらから見てもいいように、動画の表示サイズを自動的に可変させるために、次にコピーしたコードに以下のタグで囲んでやります。
<div class=”video-container”>コピーした埋め込みコード</div>
実際のコード例は下記になります。

<div class="video-container">
<iframe src="//www.youtube-nocookie.com/embed/0pZNJd4YGVQ" frameborder="0" allowfullscreen></iframe>
</div>

▼次にスタイルシートの指定をします。
cssの記述は以下になります。

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

このスタイルシートを追加すれば、PCサイト、スマホサイト(iPhone)に関わらず、モニタ(ブラウザ)のサイズに合わせて表示サイズを可変させることができます。

是非、活用してみてくださいね。