Youtubeをデザインする

YoutubeのプレイヤーUIデザインや広告、HD表示などどんどん進化するYoutube。APIでカスタマイズしてくださいという太っ腹な外人を見るととりあえずやってみたくなります。なんにつけ、外人はサービスの提供=教育&シェアと太っ腹な所が好きです。この時代に英語がまったくできない人は本当に勉強した方が良いと思います。

そのYoutubeの動画をお借りして自分のサイトとテイストを合わせて利用してしまうという方法。すごくYoutubeさんには悪いのですが、広告がクリックできなくなってしまう所だけ、ごめんなさい。ちっさなサンプルですが、このサイトのヘッダー部分のLUCY SHOWも同様の作り方をしています(音量ミュートにしたかったのでYoutubeではないんですがね)

Step1 動画フレームとなる画像作成

Youtube Frame

Photoshopで作成。額縁の中にYoutubeが表示される事を考えてレイヤーを分けて作成。額縁部分のデザインは透けているのがわかりやすくするために真四角に切り取ってません(ハエとかリボンとか)
動画のフレームとなる画像(PNG形式)で、背景となる画像を別々に作成

Frame

フレーム部分。透過PNGでフレーム以外は透けるように書き出す。

Haikei

背景画像はなんでもいいです。

Step2 Youtube動画を編集

Youtubeapi

YouTube の API とツールにて動画のサイズを変更します。右側にある入力欄に表示したい動画のIDなどを調べて入力して更新ボタンを押すと埋め込みコードとプレビューが更新されます。

Youtube側で表示値を変更した埋め込みコードでの動画表示。
サイズは横300縦225にしました。まだ完成ではないので自動再生しませんが、完成版ではautoplayにもチェックを入れます。UI操作ができなくなるので、自動再生はチェックするようにします。

Youtube Frame 2

上:額縁
中:Youtube
下:背景

というようなレイヤー構造になる事を頭のかたすみに覚えておきます。
配置例のように動画コンテンツがはみ出しても額縁部分で隠れるといった感じです。同時にYoutube動画の上に画像を重ねてしまうのでYoutubeのUIボタン(再生や停止、ボリューム等)は一切押せなくなります。いくら透過PNGとはいえ「透明の画像」という意味なので透過部分にUIを露出させた所でクリックはできません。

Step3 HTMLとCSS

上:額縁 → img (abusolute)
中:Youtube → object (relative)
下:背景 → background
HTMLのタグを簡単に当てはめた構成。
とりあえず、これどおりHTMLを書いてみる事にする。

[html]
<!–ふたつを囲うDiv–><div class="youtubeframe">

<!–額縁画像–>
<img src="youtube_frame.png" width="480" height="360" alt="額縁" class="gaku"/>
<!–額縁画像–>

<!–動画–><div class="ydoga">
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/Q1P_pUAJqkk?version=3?version=3&color1=0xb1b1b1&color2=0xcfcfcf&hd=1&feature=player_embedded">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/Q1P_pUAJqkk?version=3?version=3&color1=0xb1b1b1&color2=0xcfcfcf&hd=1&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="300" height="250"></object>
<!–動画–></div>

<!–ふたつを囲うDiv–></div>
[/html]

額縁には”gaku”、objectとembedはDivでひとくくりにして”ydoga”というクラスを付けました。
つぎはCSSを書きます。

[css]
.youtubeframe {
height: 360px;
width: 480px;
background-image: url(haikei.jpg);
}

.gaku {
z-index: 200;
position: absolute;
}
.ydoga {
z-index: 190;
position: relative;
left: 150px;
top:20px;

}
[/css]

書くと言っても、簡単なものです。youtubeframeのサイズを決定後、背景画像配置、額縁は今回は表示領域と同じサイズのPNGを書き出したので特に位置の指定は無く、z-indexとabsolute設定のみ。このとき、z-indexって自分は3桁とか付けてしまいますが間にもっとなにか入れたくなったりしたとき用に多めに値を取っています(このサイトで使ってる素材とz-indexが被るのも嫌なので)。

ydogaはrelativeを指定してgakuの基準にrelative。photoshop側で作ったラフの座標を参考にleft値とtop値を決めて行きます。ある程度の所を指定して最後に調整するようにして、まずはレイヤーとして重なってるかを確認します。

Step4 調整&完成

額縁

このサイト用にCSS側の微調整をして、動画の座標や表示箇所へのマージンを調整して完成です。あと、IEだとFlashが上に来てしまうのでコチラの対策をFlashのコード部分に追加。

[html]<!– object要素内に下記を追加 –>
<param name="wmode" value="transparent" />
<!– embed要素に下記の属性を追加 –>
wmode="transparent"[/html]

今回はyoutubeでしたが、iphoneでは埋め込みyoutubeが表示されないので将来的にはHTML5の<video>タグなんかと併せて使うと楽しそうです。

今回使用した動画の歌はStudio Apartmentの
Beautiful Sunrise (Featuring AK)」 でした。
んまぁ、なんていい曲なんでしょ。

FOR HER,FOR HIM,FOR YOU
FOR HER,FOR HIM,FOR YOU

posted with amazlet at 10.12.20
STUDIO APARTMENT
NEW WORLD RECORDS (2007-06-27)
売り上げランキング: 23926
expand_more

コメントする

メールアドレスが公開されることはありません。

CAPTCHA