MAROON 5『THIS LOVE』をBASS PLAY♪♪♪「www」の有無を統一する設定方法

2014年10月19日


YOUTUBEレスポンシブ設定

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

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

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

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

↑冒頭のPHOTO参照♪

方法は・・・

1:
レスポンシブyoutube設定1

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

2:
YOUTUBEレスポンシブ設定3

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・スマホそれぞれで最適化して見れるようになった次第♪ 


shun699 at 15:33│ このエントリーをはてなブックマークに追加 IT:web design | IT:movie
MAROON 5『THIS LOVE』をBASS PLAY♪♪♪「www」の有無を統一する設定方法