2014年10月19日

今年 私が立ち上げたWEBSITE、GROOVESTERのTOP PAGEにて、
YOUTUBE番組『祭文監督の部屋』 の最新映像を掲載している。
「SITEに来れば 常に最新の動画が見れる」、
というエッジ感のためにも そうしているのだが、
今までは、このYOUTUBEのサイズを小さめにしていた。
PCで見る時のサイズに設定すると、
スマホで見た時に大きくなり過ぎてしまうから。
ただ、PCで見た時、小さいんだよなぁ、
ということで・・・
今、
YOUTUBE映像もレスポンシブ表示対応に設定!!!
PCで見た時は大きく、
スマホで見た時はスマホサイズで、
表示されるようになった次第。
↑冒頭のPHOTO参照♪
方法は・・・
1:

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

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・スマホそれぞれで最適化して見れるようになった次第♪
これにより、
HTMLで設定した表側を指定するわけなのだが、
POINTは、
width(幅)とheight(高さ)を100%として、
開いたWEBの画面いっぱいに広がるようにする点と、
padding-bottom: 56.25%とすることにより、
アスペクト比(縦横比)を指定する点。
HD動画が多く、縦横比=16:9だから、
100÷16×9=56.25% .
ということで、
HTML・CSS双方を設定することにより、
無事、GROOVESTER TOP PAGEの『祭文監督の部屋』は、
PC・スマホそれぞれで最適化して見れるようになった次第♪