Calendar
SunMonTueWedThuFriSat
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< December 2017 >>
Recommend
New Entries
Archives
Categories
Recent comment
Recent trackback
Profile
Links
Sponsored Links
Mobile
qrcode
Admin
無料ブログ作成サービス JUGEM
Seach this site
2009.12.11 Friday
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | | - | - | pookmark |
2009.07.20 Monday
YouTubeの埋め込みでメニューを消す
ねぎうぉっちの記録を始めてはやいもので、もう2週間。
記録した画像もたまってきました。

表示切り替えパネルでこれをパチパチ切り替えて、成長の度合いを見ることも出来るのですが、どうせなら、これを動画にしてサイトに貼り付けてやろうなどという気を起こしてしまいました。
日曜の夜、もうちょっとゆっくりしたかったのですが、ビンゴもできてちょっぴり勢いづいているのかも。

動画のほうは、あれこれ凝った効果をつけてみたりもしたのですが、やっぱりシンプルなのが一番、ということで、1枚(実1時間相当)を1フレームにして、ねぎの成長部分をアップにする、それだけにしました。(結果としてなんだか手抜きみたいですが、いろいろ試してみてこれが一番よかったのですヨ。ホントに)

1日分が24フレームなので、1秒にはちょっと足りないのですが、まあ、だいたい1日が1秒ということで、つくった動画こちら。



それで、これをトップページ(といってもサイト全体で1頁しかないのですが)に貼り付けることにしました。

まあ、YouTubeのタグを貼り付けておしまい、と思いきや、意外な問題にぶちあたりました。

それがメニュー表示です。

再生ボタンと位置スライダー。そしてボリューム。
とても大切な機能ですが、「意味もなく(ほぼ)一頁主義」のねぎうぉっちにとって、ページ上のスペースは限られていて非常に重要なのです。なので、普段つかわないものは見せない主義。

で、Flashでオーサリングして、中にFLVを埋め込むときは、マウスオーバーした時だけコントロールを表示する、というのがあるのだから、youtubeにもあるだろうと思ったのですが、APIのページにも残念ながら見つかりませんでした。
YouTube 埋め込みプレーヤーのパラメータ
http://code.google.com/intl/ja/apis/youtube/player_parameters.html
(隠しコマンドなども検索してみましたが上手く見つけられませんでした)

そこで、ないなら自分でなんとかしよう、ということで、スタイルシートで解決することにしました。

<div style="position:relative;width:164px;text-align:left;">
<div style="position:absolute;width:164px;height:123px;overflow:hidden;"
   onmouseover="this.style.height='149px';"
   onmouseout="this.style.height='123px';">
<object 〜 ここにYouTubeサイトで生成したタグ 〜 /object>
</div></div>

動画のサイズにdivを切り取って、それをposition:absoluteにして他の要素に影響させないようにします。
それでいて、overflow:hiddenではみ出した部分(つまりメニュー)を表示しないようにしますが、マウスがのっかってきた時はheightを拡張して、マウスが出て行ったらheightを元にもどす。
これでばっちりでのはず。。。

テストもうまくいきました。
(動作はねぎうぉっちに見に行ってみてください。右上の小さい動画部分です)

スクリプトをタグの中に埋め込むのを嫌う方もいらっしゃるので、その場合は、scriptタグ部分に関数として書き出せばよいかと思います。ただ、タグに埋め込むと、getElemetByIdでオブジェクトを探さなくても、クリックした自分自身にアクセスするのなら、thisで簡単です。(VBだとcallerって呼び出し方がありますね)

ということで、動画の埋め込みも準備完了。

あ、オートプレイにしたいけど、muteせずにやるのもなんだか失礼な感じがするので、これはまた今度。
javascriptからyoutube画像の操作もできるそうです。

(早く投稿しよう。外では雷が鳴ってる!!)


・・・・追記・・・・

実はIEではうまく動作しましたが、FireFoxではダメでした。
どうも、firefoxでは、overflow:hiddenでflashオブジェクトをクロップ(切り抜き)できないようです。
ただ、ちょろと検索すると、
Firefox - setting overflow hidden on DIV does not clip flash-object
というところに、
Ooops, seems trying <param name="wmode" value="opaque" /> solved it. Well, hope it can help others looking/searching.
とあったので、embedの中に、 wmode="opaque" をはさむことで解決しました。感謝。

日本語サイトでは、ここにあります。
http://maglog.jp/lightbox/Article456566.html
ここではtransparentに設定されています。で、ちょっとブラウザチェックをはさんでいます。
z-indexがきかなくなることもあわせて書かれています。(確かに、ねぎうぉっちもでz-indexは効いてないので、できごとコメント(上に表示したいdiv)を表示するときは、ビデオとアマゾンのバナーはhiddenにしています)

調べてみると、このwmodeの設定にはいろいろ問題がありそうです。
フラッシュのボタンが押せなくなるとか、firefoxが落ちるとか。
http://blog.ishiro.com/?p=165

・・・・追記・・・・の・・・・追記・・・・

んがー。
macではダメでした。ごめんなさい。今晩は限界。。。


| ねぎうぉっち中の人 | コンテンツ制作 | 02:45 | comments(0) | trackbacks(0) | pookmark |
2009.12.11 Friday
スポンサーサイト
| スポンサードリンク | - | 02:45 | - | - | pookmark |
Comment









Trackback
URL : http://negiwatch.jugem.jp/trackback/10