備忘

完全自分向けのメモです。お役に立てると良いのですが。。。あまりにも雑なものは非公開として整理中です

Youtubeのパラメーター

最近やはり動画の埋め込みなどをする事が多く、忘れがちなので、youtubeのパラメータをメモ
ここ

[html]
YouTube 埋め込みプレーヤーのパラメータ
目次

1.概要
2.パラメータa.rel
b.autoplay
c.loop
d.enablejsapi
e.playerapiid
f.disablekb
g.egm
h.border
i.color1, color2
j.start
k.fs
l.hd
m.showsearch
n.showinfo
o.iv_load_policy
p.cc_load_policy

3.使用例

概要

このドキュメントでは、YouTube 埋め込みプレーヤーで使用できるすべてのパラメータについて説明します。
これらのパラメータを SWF URL に追加することで、色や境界線だけでなく、プレーヤーで JavaScript API を有効にするかどうかなどを設定できます。

パラメータ

以下に示すパラメータはすべて省略可能です。
これらのパラメータは、埋め込みプレーヤーでのみ正式にサポートされています。
ただし、一部のパラメータは、再生リスト プレーヤーやカスタム プレーヤーのようなプレーヤーでも動作する場合があります。

rel値: 0 または 1。デフォルトは 1 です。
最初の動画の再生を開始した後、プレーヤーで関連動画を読み込むかどうかを指定します。
関連動画は、メニュー ボタンをクリックするとジニー メニューに表示されます。
プレーヤー検索機能は、rel を 0 に設定すると、無効になります。

autoplay値: 0 または 1。デフォルトは 0 です。
プレーヤーを読み込んだときに最初の動画を自動再生するかどうかを指定します。

loop値: 0 または 1。デフォルトは 0 です。
単一動画プレーヤーの場合、1 を設定すると、最初の動画が繰り返し再生されます。
再生リスト プレーヤーまたはカスタム プレーヤーの場合、再生リスト全体を再生した後、最初の動画から再び再生が始まります。

enablejsapi値: 0 または 1。デフォルトは 0 です。
この値を 1 に設定すると、JavaScript API が有効になります。
JavaScript API とその使い方について詳しくは、JavaScript API ドキュメントをご覧ください。

playerapiid値: 英数字の文字列。
この設定は、JavaScript API と組み合わせて使用します。
詳しくは、JavaScript API ドキュメントをご覧ください。

disablekb値: 0 または 1。デフォルトは 0 です。
1 に設定すると、キーボードによるプレーヤーの操作が無効になります。
キーボードによる操作は次のとおりです:
スペース キー: 再生/一時停止
左矢印キー: 現在の動画を 10% 戻す
右矢印キー: 現在の動画を 10% 進める
上矢印キー: 音量を上げる
下矢印キー: 音量を下げる

egm値: 0 または 1。デフォルトは 0 です。
1 に設定すると、拡張ジニー メニューが有効になります。
拡張ジニー メニューを有効にすると、ジニー メニューが存在する場合は、メニュー ボタンがクリックされたときだけでなく、
ユーザーのマウス ポインタが動画の表示領域に入ったときにもジニー メニューが表示されるようになります。

border値: 0 または 1。デフォルトは 0 です。
1 に設定すると、動画プレーヤーの周りに境界線が表示されます。
境界線のメイン カラーは color1 パラメータで、サブ カラーは color2 パラメータで設定できます。

color1, color2値: 16 進数形式の RGB 値。
color1 は境界線のメイン カラー、color2 は動画コントロール バーの背景色と境界線のサブ カラーです。

start値: 正の整数。
このパラメータを指定すると、プレーヤーは、動画の先頭から指定された秒数分進めた位置で動画の再生を開始します。
seekTo 関数と同様に、プレーヤーは指定された時間に最も近いキーフレームを探します。
そのため、リクエストされた時間の直前から再生が開始される場合もありますが、通常は最大で 2 秒程度です。

fs値: 0 または 1。デフォルトは 0 です。
1 に設定すると、フルスクリーン ボタンが有効になります。
この設定は、クロムレス プレーヤーには影響しません。
埋め込みコードでこの機能を有効にするには、他にもいくつか引数を指定する必要があります。
以下の例では、太字部分でフルスクリーン機能を有効にしています:
<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"</param>
<param name="allowFullScreen" value="true"></param>
<embed src="https://www.youtube.com/v/u1zgFlCw8Aw?fs=1"
type="application/x-shockwave-flash"
allowfullscreen="true"
width="425" height="344">
</embed>
</object>

hd値: 0 または 1。デフォルトは 0 です。
1 に設定すると、デフォルトで HD 再生が有効になります。この設定は、クロムレス プレーヤーには影響しません。
また、動画の HD 版を使用できない場合もこの設定はプレーヤーに影響しません。
このオプションを有効にすると、低速で接続しているユーザーは HD を無効にしないと動画を快適に表示できない可能性があることに注意してください。
また、プレーヤーのサイズは、動画をネイティブの解像度で十分に表示できる大きさにしてください。

showsearch値: 0 または 1。デフォルトは 1 です。
0 に設定すると、動画を最小化したときに検索ボックスが表示されなくなります。
rel パラメータが 0 に設定されている場合は、showsearch の値に関係なく検索ボックスは無効になります。

showinfo値: 0 または 1。デフォルトは 1 です。
0 に設定すると、動画の再生を開始する前にタイトルや評価などの情報が表示されなくなります。
iv_load_policy値: 1 または 3。デフォルトは 1 です。
1 に設定すると、動画アノテーションがデフォルトで表示されるようになります。
3 に設定すると、動画アノテーションはデフォルトで非表示になります。

cc_load_policy値: 1。デフォルトは、ユーザー設定に基づきます。
1 に設定すると、ユーザーがキャプションをオフにしていても、クローズド キャプションがデフォルトで表示されます。

使用例

上記のパラメータを使用するには、YouTube 動画 SWF URL の末尾に追加します。

通常、SWF URL は次のようになっています:
https://youtube.com/watch?v=VIDEO_ID
URL に yt:format=5 <media:content> が含まれていれば、YouTube Data API を使用してプログラム的にアクセスできます。
この形式は、動画をアップロードしたユーザーが埋め込みを無効にしている場合は使用できません。
<media:content url="http://www.youtube.com/v/VIDEO_ID" type="application/x-shockwave-flash" medium="video"
isDefault="true" expression="full" duration="100" yt:format="5"/>
カラー テーマを青色系に変えるには、2 つの color パラメータを変更します。
https://youtube.com/watch?v=VIDEO_ID%3Fcolor1%3D0x2b405b%26color2%3D0x6b8ab6%26fs%3D1
その後、変更した URL を埋め込みコードに組み込みます:
<object width="425" height="355">
<param name="movie" value="https://www.youtube.com/v/u1zgFlCw8Aw?rel=1&color1=0x2b405b&
color2=0x6b8ab6&border=1&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="https://www.youtube.com/v/u1zgFlCw8Aw?rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1&fs=1"
type="application/x-shockwave-flash"
width="425" height="355"
allowfullscreen="true"></embed>
</object>

以下のように境界線付きのプレーヤーが青色系で表示されるよう、rel、color1、color2、border の各パラメータを変更しています。
また、rel パラメータが 1 に設定されているため、メニュー ボタンをクリックすると関連動画も読み込まれます。
[/html]

Media Query

メディアクエリーの書き方
[html]<a href="http://news.mynavi.jp/articles/2010/10/12/css3-media-query-template/index.html" target="_blank">参照</a>
<a href="http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries" target="_blank">元記事参照</a>
<a href="http://aqua-create.com/css/css3-media-queries-width-website/">ここ</a>も参考になります
[/html]
IE8以下は、アカンようで、
[html]
&lt;!–[if IE]&gt;
&lt;link href=&quot;pc.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;![endif]–&gt;
[/html]
これ要るようです。

Continue reading

jQuery.Twinkleを背景のアクセントとして使うコード – console.lealog();

// jQueryと、jQuery.Twinkleは読み込んでおいてから・・・。

jQuery(function(){

var b = 0,

c = function() {

var c = ["rgba(39,74,120,0.3)", "rgba(0,148,200,0.2)", "rgba(193,228,233,0.4)", "rgba(22,94,131,0.3)", "rgba(15,35,80,0.2)", "rgba(74,72,142,0.1)"],

d = c[b++ % c.length],

e = {

widthRatio: Math.random(),

heightRatio: Math.random(),

effect: "splash-css",

effectOptions: {

radius: 200,

duration: 1e3 + Math.random() * 1e3,

color: d

}

};

jQuery("#hogehoge").twinkle(e);

};

jQuery(function() {

setInterval(c, 200)});

});

引用元: jQuery.Twinkleを背景のアクセントとして使うコード – console.lealog();.

メディアクエリーからVIEWPORT

参考にさせていただきました。

●メディアクエリ(Media Queries)の記述方法

基本的にはブラウザ用のCSSを設定するmedia=”screen”にウインドウの横幅の最大・最小サイズを追加して、
media=”screen and (max-width:○○○px)”、media=”screen and (min-width:○○○px)”というような書き方をします。

それぞれ通常のCSSの読み込みと同様に内のlink要素、CSSの@import、CSSソース内に書くことができます。
Continue reading