ytplayerを使って全画面のYouTube動画を背景にする

Youtubeの動画を半透明なbackgroundにしてしまうという手法を、おしゃれなティザーページなどで見かけることが多くなってきましたね。
どうやってやるのかなぁと思って調べてみました。

すると、とても簡単に実装できそうなjQueryのプラグインのytplayerというものがありました。
とりあえずデモっぽいものを動かしてみました。


http://serima.co/youtube/watch

ついでにyoutubeの動画のvパラメータをそのままくっつければ、再生されるようにしてみました。
何もパラメータを指定しないでアクセスしたときは、都内のドライブ映像を流し続けます。

以下は、指定したバージョン。

http://serima.co/youtube/watch?v=ognrTXHoutU

勝手にリピート再生するようになっています。

watchというファイルをphpとして動作させるため、MIMEタイプを.htaccessで制御しています。
.htaccessを配置したディレクトリ以下のファイルすべてに対して、phpとして動作させるように設定。
その上で、拡張子ごとにForceTypeしてMIMEタイプをオーバーライド。

[php]
ForceType application/x-httpd-php

ForceType text/html


ForceType text/css


ForceType text/javascript


ForceType image/gif


ForceType image/jpeg


ForceType image/png

[/php]

MIMEタイプについては以下に。
http://mikeneko.creator.club.ne.jp/~lab/web/htaccess/mime.html

ytplayerのドキュメントやらなんやらは以下からどうぞ。
https://github.com/pupunzi/jquery.mb.YTPlayer

高専卒→大学編入中退→起業→転職を経て、ソーシャルゲームを作ったあと、とあるアプリのサーバサイドエンジニアをやっています。 技術の未来予測とかデザインのリノベーションとか、おぎやはぎとかネギトロ丼が好きです。 猫飼いたい。 twitterは@serimaです。お気軽にfollow/unfollowどぞ(゚∀゚)

下の「いいね」ボタンを押すと、やる気パラメータが+1!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です