2014年10月19日

YOUTUBEをレスポンシブ表示設定する方法

今年私が立ち上げたWEBSITE、GROOVESTERのTOP PAGEにて、
YOUTUBE番組『祭文監督の部屋』の最新映像を掲載している。

「SITEに来れば常に最新の動画が見れる」、
というエッジ感のためにもそうしているのだが、
今までは、このYOUTUBEのサイズを小さめにしていた。
PCで見る時のサイズに設定すると、
スマホで見た時に大きくなり過ぎてしまうから。
ただ、PCで見た時、小さいんだよなぁ、
ということで・・・

今、
YOUTUBE映像もレスポンシブ表示対応に設定!!!

PCで見た時は大きく、
スマホで見た時はスマホサイズで、
表示されるようになった次第。

↑冒頭のPHOTO参照♪

方法は・・・

１：

HTMLで、
YOUTUBEのiframeコードをdivで囲む。
ここでは、
<div class="youtube-container">　</div>
で囲んだ。

２：

CSS（style）にて、
下記CODEを記載。

.youtube-container {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

.youtube-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

これにより、
HTMLで設定した表側を指定するわけなのだが、
POINTは、
width（幅）とheight（高さ）を100%として、
開いたWEBの画面いっぱいに広がるようにする点と、
padding-bottom: 56.25%とすることにより、
アスペクト比（縦横比）を指定する点。
HD動画が多く、縦横比=16:9だから、
100÷16×9=56.25% .

ということで、
HTML・CSS双方を設定することにより、
無事、GROOVESTER TOP PAGEの『祭文監督の部屋』は、
PC・スマホそれぞれで最適化して見れるようになった次第♪