IT:movie
2016年01月10日
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・スマホそれぞれで最適化して見れるようになった次第♪
2014年08月29日
Instagramを使っている人がどんどん増えている今日この頃、
さらに、最近、Instagramからリリースされた新アプリ、Hyperlapseが
話題になっている。
カンタンに手ブレなくタイムラプス撮影が可能で、
最大12倍速まで早回転させられて、
Instagramで友達に伝えるのに超効果的かと。
ということで、
早速、先程、渋谷スクランブル交差点を撮ってみた。
↑YouTubeにもUPしたので、是非ご覧ください♪
井の頭線の通路のところから撮影。
8倍速にしたVersion.
このスクランブル交差点、
海外に人にとっては珍しい光景らしく、
よくココを撮影している外国人を見かける。
どうやら、
あれほど多くの人が一斉にクロスするのにブツからないのが、
感動的らしいw
P.S.
InstagramにコノShort ver.をupしたのだが、
なかなか好評♪
川井田南(みーちゃん)@わらび座、研@art_in_you@shun699 そうだったんですね〜∧( ऀ ˡ̼̮ ऀ )∧沖縄から離れて始めて故郷がこんなに愛おしいと気づいた馬鹿者です。しゅんサンも沖縄満喫できましたか?
2014/08/29 22:01:05
川井田南(みーちゃん)@わらび座、研@art_in_you@shun699 はい!是非リベンジして下さい⭐️私も先日の帰省は曇りで海の青を思い切り堪能できず残念でした>_<
2014/08/29 22:43:00