• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+
イイね!
2015年08月08日

【 みんカラ 】ブログにYouTube動画を貼り付ける方法 2015年度版 Part2

※ 追記 2016年10月03日
現在のみんカラでは動画の埋め込み方法に変更がありましたので、これに対応した方法はこちらの記事をご覧ください。
前回のブログで、基本的な【 みんカラ 】ブログにYouTube動画を貼り付ける方法を紹介しましたが、YouTubeの動画埋め込みプレイヤーにはオプションのパラメータを YouTube 動画 SWF URL の末尾に追加することで、外観をカスタマイズしたり、動画を自動再生させたり、動画の再生開始位置や再生終了位置を指定する等といった裏技的な機能もあります。
(スマートフォンなどのように「Adobe Flash Player」がインストールされていないブラウザでは作用しないようですが。)
そこで今回はYouTubeの動画を貼り付ける際の裏技的なカスタマイズ方法(パラメータオプション)を紹介します。

まずカスタマイズする上で覚えなくてはならないHTMLコードの見方があります。
◆ 基本埋め込みコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="580" height="326" allowscriptaccess="always" allowfullscreen="true"></embed>
上記の埋め込み用のHTMLコードで、下線が引いてある部分がYouTube 動画 SWF の URLです。
その中の http://www.youtube.com/v/ と ? の間にある ***********部分の11文字がその動画のVIDEO_ID(動画 ID)で、それ以降の ●●=値 とあるのがパラメータです。
そのパラメータの値を変えたり、新たなパラメータを設定する事によってカスタマイズする事ができます。
動画 ID以降のパラメータは省略することもできますが、その際はYouTubeが設定したデフォルト(初期設定)値になります。 複数のパラメータを指定する場合、間に &amp;(若しくは&) を入れます。
因みに上記例のパラメーターは、
  • version=3は、AS3プレイヤーで表示する。
  • hl=ja_JPは、言語コードは日本語。
  • rel=0は、動画再生が終わったら関連動画を表示しない
と言う事を意味してます。
また、width="580" height="326"は動画埋め込みサイズを幅"580"、高さ"326"ピクセルの大きさに設定することを意味してます。
allowfullscreen="true"はフルスクリーン表示を許可することを意味しています。

◇ 動画埋め込みプレイヤーのタイプを指定するパラメータ

version=2
version=3
YouTube 動画プレイヤーには、Flash形式の動画プレイヤーActionScript 2 playerActionScript 3 playerとHTML5形式の動画プレイヤーHTML5 player の3タイプのビデオプレーヤーがあります。
HTML5 playerは、これに対応したブラウザでは「Flash Player」がインストールされていなくても動画を再生でき、また再生速度を変えることもできるといった機能もあるのですが、残念ながら【 みんカラ 】ブログでは<iframe></iframe>タグの埋め込みコードを使う事が出来ないためこの動画プレイヤーで表示させることができません。
しかしながらAS2プレイヤーAS3プレイヤーの使い分けは今ののところ可能です。
AS2プレイヤーAS3プレイヤーの見た目の違いは動画コントロールバーのデザインと高さが若干違う程度ですが、デザインや機能をカスタマイズすることも可能です。
AS2プレイヤーはYouTubeのサポートから外れたようなので、近い将来表示できなくなる可能性が有ります。
AS2プレイヤー
AS3プレイヤー
上の動画の埋め込みコード
AS2プレイヤー
<embed src="http://www.youtube.com/v/15bQjiwzgUA?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="290" height="190" allowscriptaccess="always" allowfullscreen="true"></embed>
AS3プレイヤー
<embed src="http://www.youtube.com/v/15bQjiwzgUA?version=3&amp;hl=ja_JP&amp;rel=0">theme=light" type="application/x-shockwave-flash" width="290" height="201" allowscriptaccess="always" allowfullscreen="true"></embed>
2012年5月のYouTube仕様変更によりAS3プレイヤーがデフォルトになりましたので、version=3を指定しなくても(省略しても)ActionScript 3 playerで表示されることになりました。
逆にAS2プレイヤーで表示したい場合には、version=2を指定する必要があります。

◇ 動画コントロール バーの色を選択するパラメータ

theme=値( dark もしくは、light )
このパラメータを使用すると、動画の下部に表示されているコントロール バーの色を選択することができます。現在では、動画コントロール バーの色がデフォルトでは黒っぽいdarkになっていますが、白っぽいlightにすることも可能です。有効なパラメータ値は、darklight。デフォルトでは、darkに設定されています。
AS2プレイヤー
AS3プレイヤー
上の動画の埋め込みコード
AS2プレイヤー
<embed src="http://www.youtube.com/v/9kC0VfWkAbQ?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0&amp;theme=light" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="290" height="190"></embed>
AS3プレイヤー
<embed src="http://www.youtube.com/v/9kC0VfWkAbQ?version=3&amp;hl=ja_JP&amp;rel=0&amp;theme=light" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="290" height="201"></embed>

◇ 動画コントロール バーの境界線の色と背景色を設定するパラメータ

color1=値, color2=値
AS3プレイヤーの場合、動画コントロール バーの背景色はdark色とlight色の2種類しか選べませんが、AS2プレイヤーに於いては背景色と境界線の色を個別に好みの色に指定することができます。

上の動画の埋め込みコード
<embed src="http://www.youtube.com/v/AFtUpMTs4vI?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0&amp;color1=0xffff00&amp;color2=0x25b7c0" type="application/x-shockwave-flash" allowscriptaccess="never" allowfullscreen="true" width="580" height="351"></embed>
このパラメータはAS2プレイヤーでしか有効になりませんですので、AS2プレイヤーで表示するためのパラメータversion=2を追加指定する必要があります。
境界線の色を変更するには&amp;color1=0xffff00&amp;color1=0x以降の6文字の半角英数字部分を、指定したい色の「#(ハッシュ)」を除いた16 進数形式の RGB カラー値に変更します。
動画コントロール バーの背景色を変更するには&amp;color2=0x25b7c0&amp;color2=0x以降の6文字の半角英数字部分を、指定したい色の「#(ハッシュ)」を除いた16 進数形式の RGB カラー値に変更します。

color1=0xRGB カラー値
color2=0xRGB カラー値
color1=0xRGB カラー値
◆ 動画コントロール バーの境界線の色を設定する埋め込みコード
<embed src="http://www.youtube.com/v/***********?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0&amp;color1=0xff0000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed>
color2=0xRGB カラー値
◆ 動画コントロール バーの背景色を設定する埋め込みコード
<embed src="http://www.youtube.com/v/***********?version=2&amp;fs=1&amp;hl=ja_JP&amp;rel=0&amp;color2=0xff0000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed>

◇ ビデオプログレスバーの色を選択するパラメータ

color=値( red もしくは、 white )
このパラメータは、ビデオプログレスバー(動画の進行状況バー)で使用される色を指定します。有効なパラメータ値は、redwhite。デフォルトでは、ビデオプログレスバーの色はredに設定されています。
注:このパラメータは、AS2埋め込みプレイヤーではサポートされておりません。
color=white

color=red

◆ ビデオプログレスバーの色を白色にするコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0&amp;color=white" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed>

◇ YouTubeのロゴが表示されないパラメータ

modestbranding=値( 0 または、 1 )
通常AS3プレイヤーのコントロール バーには、YouTubeサイトの動画単独ページにリンクするためのYouTubeのロゴが表示されていますが、modestbrandingパラメータの値を 1 に設定すると、これをコントロール バーに表示させないようにすることができます。ただし、動画を一時停止したときにユーザーがプレーヤーにカーソルを合わせると、動画の右上に引き続き小さい YouTube テキストラベルが表示されます。デフォルトでは、 0 に設定されています。
modestbranding=1
modestbranding=0
◆ コントロール バーにYouTubeのロゴを表示させないコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0&amp;modestbranding=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed>

◇ 動画コントロール バーを隠すパラメータ

autohide=値(2、1、および 0)
デフォルト値は 2 です。
このパラメータは、動画の再生が開始された後、動画コントロール バーを自動的に非表示にするかどうかを指定します。隠れた動画オコントロール バーはマウスを動画上に移動すれば一時的に再び表示されます。
YouTube動画埋め込みプレイヤーのデフォルト(autohide=2)の動作では、プレーヤーのサイズが16:9または4:3のアスペクト比を持つならば、ビデオ・プログレス・バー(動画の進行バー)とプレーヤー・コントロール(再生ボタン、ボリューム コントロールなど)が自動的に表示が消えますが、さもなければ、プレーヤー・コントロールは表示されたままになります。
このパラメータを 0 に設定すると、プレーヤーのアスペクト比に関係なく、動画の進行バーとプレーヤー コントロールは動画が終了するまで表示されます。
このパラメータを 1 に設定すると、プレーヤーのアスペクト比に関係なく、動画の再生を開始して数秒後に、動画の進行バーとプレーヤー コントロールが非表示になります。これらが再び表示されるのは、ユーザーが動画プレーヤーにカーソルを合わせるか、キーボードのキーを押した場合のみです。
autohide=0

autohide=1

autohide=2

上の動画の埋め込みコード
<embed src="http://www.youtube.com/v/qSg1uVZNEK4?version=3&amp;hl=ja_JP&amp;rel=0&amp;autohide=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="290" height="163"></embed>
<embed src="http://www.youtube.com/v/qSg1uVZNEK4?version=3&amp;hl=ja_JP&amp;rel=0&amp;autohide=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="290" height="201"></embed>
<embed src="http://www.youtube.com/v/qSg1uVZNEK4?version=3&amp;hl=ja_JP&amp;rel=0&amp;autohide=2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="290" height="201"></embed>

◇ 動画コントロール バーを表示するかどうかを指定するパラメータ

controls=値( 0 、 1 または 2)
デフォルト値は 1 です。
このパラメータ値を 0 に設定すると、埋め込みプレイヤーのアスペクト比やマウスを動画上に移動するに関わらず、動画コントロール バーを非表示にできます。
注: <IFrame>タグによる埋め込みの場合は、パラメータ値が 1 と 2 の場合のユーザー エクスペリエンスはまったく同じですが、controls=2 を指定すると controls=1 よりもパフォーマンスがよくなります。現在は、動画のタイトルのフォントサイズが異なるなど、2 つの値の間でプレーヤーの表示にまだ多少の相違があります。ただし、両方の値の間の相違がユーザーにまったくわからなくなった場合は、パラメータのデフォルト値が 1 から 2 に変更される可能性があります。
controls=0

controls=1

◆ 動画コントロール バーを表示させないコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0&amp;controls=0" type="application/x-shockwave-flash" width="580" height="326" allowscriptaccess="always" allowfullscreen="true"></embed>
動画コントロール バーが非表示になっても、動画上でクリックもしくは、キーボードのスペースキーをクリックすると再生/一時停止できます。音量調整はキーボードの↑/↓のキーを押して操作することはできます。戻す/進めるは←/→のキーを押して操作することはできます。動画上でダブルクリックすると全画面表示になります。

◇ キーボード操作を無効にするパラメータ

disablekb=値( 0 または、 1 )
デフォルトは 0 です。
このパラメータ値を 1 に設定するとプレーヤーをキーボードで操作できなくなります。
キーボードによる操作は次のようになります。
  • スペースキー: 再生 / 一時停止
  • ↑上矢印キー: 音量を上げる
  • ↓下矢印キー: 音量を下げる
  • ←左矢印キー: 現在の動画を 10% 戻す
  • →右矢印キー: 現在の動画を 10% 進める
disablekb=1

disablekb=0

◆ キーボード操作を無効にするコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0&amp;disablekb=1" type="application/x-shockwave-flash" width="580" height="326" allowscriptaccess="always" allowfullscreen="true"></embed>

◇ 関連動画を表示するパラメータ

rel=値( 0 または、 1 )
デフォルト値は 1 です。
最初の動画の再生が終了したときに、プレーヤーに関連動画を表示するかどうかを指定します。
rel=1

rel=0

◆ 関連動画を表示させないコード
<embed src="http://www.youtube.com/v/***********?version=3&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" width="580" height="326" allowscriptaccess="always" allowfullscreen="true"></embed>



文字数制限になったので「Part3」に続きます。(笑)

ブログ一覧 | Video Sharing | パソコン/インターネット
Posted at 2015/08/08 16:51:51

イイね!0件



今、あなたにおすすめ

関連記事

Galaxy S6 edge 64 ...
ft_726さん

小樽痛車イベント
痛車ラオウさん

コスプレイヤーさん、可愛い❤人居る ...
痛車ラオウさん

NO DISA って??
dapyanさん

why japanese peop ...
とらんちゅさん

小樽痛車イベント
痛車ラオウさん

この記事へのコメント

コメントはありません。
現在価格を調べてみる

おすすめアイテム

 
 

プロフィール

みんカラ 旧ニックネーム : 銀色S2000はーどとっぷ  30歳を過ぎた或る日、ドライビングスクールに参加したことが切っ掛けで、走りに目覚めてしまいました。...
みんカラ新規会員登録

ユーザー内検索

<< 2017/9 >>

     12
3456789
10111213141516
17181920212223
24252627282930

リンク・クリップ

Traditional Japanese Garden Styles 
カテゴリ:My Web Site
2009/11/28 11:24:50
 
My Favorite Things 
カテゴリ:My Web Site
2007/08/08 15:38:09
 

ファン

61 人のファンがいます

愛車一覧

トヨタ 86 トヨタ 86
『新・すーぱードライビングテクニック養成マシーン』 GRADE :GT TYPE ...
三菱 アイ 三菱 アイ
『スーパー通勤快速号』 型式 CBA-HA1W 2009(H21)年式 GRADE:T ...
ホンダ S2000 ホンダ S2000
『すーぱードライビングテクニック養成マシーン』 ’99年式の初期型です。 タイヤ・ ...
BMW 3シリーズ クーペ 『黒い36くーぺ2号』 (BMW 3シリーズ クーペ)
『黒い36くーぺ2号』 ’96年式の E36 328i くーぺ

QRコード

QRコード
このブログを携帯でご覧になれます
ヘルプ利用規約サイトマップ
©2017 Carview Corporation All Rights Reserved.