カテゴリー別アーカイブ: jQuery

背景をフルサイズの動画にする 【mb.YTPlayer for background videos 】

 

サイト背景をフルサイズの動画にするプラグイン。

背景を動画にするのはBigVideo.jsっていうjQueryでできる。
BigVideo.js - The jQuery Plugin for Big Background Video
⇒⇒⇒BigVideo.jsのデモページ

このjQueryの使い方は、colissさんの記事が参考になる。

で、これと同等のプラグインをいくつか調べていたら、mb-ytplayerというのがあって、これにはWPのプラグインがあるみたいなので入れてみる。
公式プラグインなので、←のリンクからでも、WPの管理画面>プラグイン>新規追加からキーワド入力でも簡単に見つかります。
私が入れた時点では、プラグイン新規追加画面の評価は★5つでした。

使い方は、説明するまでもなく超簡単。
プラグイン新規追加>有効化>左メニューの「設定」内に「mb.YTPlayer」というのが追加されているので、ここで設定するだけ。
日本語化されていなくても、やさしい英語で書かれてるので、多分普通の人であれば問題ないはず。
(chromeが勝手に翻訳した日本語の方が意味不明だった。)

「home video: url」ってとこに、YoutubeのURLを入れるだけ。
「home video: start at」ていうのが、デフォルトだとfalseになってるので、適当な数字を入れてあげる。
「0」だと動かなかった。0.1でも0.01でも動いた。
あとはコントロールを付けるかとか、透過度とか、ループとかが簡単に設定できるのでお好みで設定して完了。

尚、オリジナル動画を使いたければ、一度Youtubeにアップする必要あり。
現状、動画はYoutubeしか対応していないみたいなので、自サーバに動画上げて・・・ってことはできないみたい。

とりあえず無料映像素材でググったら、羽の動画を設定してみる。
元の背景画像がリリアン・ギッシュだからちょっとデザインちぐはぐだけど、ひとまず実験ということで・・・。
良い無料素材、Youtubeにないかなー・・・・

 

【2013/9/3 追記】
素敵な動画素材を探す暇もなかったので、プラグイン停止しました。

 

jQueryの競合回避【WP】

 

【一般的】

head内jQueryよりも前に以下を記述。

<script>
jQuery.noConflict();
var j$ = jQuery;
</script>

jQueryの$を j$に書き換える。

 

【WP】
若干特殊
$ の代わりに jQuery を使用する。
MegaMenu Pluginだとこんな感じ↓
<script type=”text/javascript”>
jQuery (function(){
var SelfLocation = window.location.href.split(‘?’);
switch (SelfLocation[1]) {
case “justify_right”:
jQuery(“.megamenu”).megamenu({ ‘justify’:’right’ });
break;
case “justify_left”:
default:
jQuery(“.megamenu”).megamenu();
}
});
</script>

WP通常紹介されるnoConflictで上手くいかないので要注意。