TOP

ユーチューブ動画をカスタマイズしましょう

YouTube動画をサイトやブログには埋め込みコードを所得して貼り付ければ
簡単に配置できますね

 

ですが そのままのスタイルではなくカスタムすることで
サイトイメージにに合わせる事もできるのです

 

そんなカスタム事例をご参考ください

 

 

ご注意ごと

 

ボリューム調整や 消音とかのサウンド関連に際しては
パラメータで指定できません

 

 

 

通常動画から取り出す埋め込みコードは以下の記述です
<iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM" frameborder="0" allowfullscreen></iframe>

 

全てのコピー記述に lH4lc2JWDNM とありますが
ユーチューブの動画を個別指定するためのIDです
好みの動画IDに変えられてください

 

記述コードは途中折れしていますが シリウスの操作画面に貼り付けますと
一列化します

 

 

通常の動画ですが 自己主張?またはイメージ戦略のために
見た目や操作モードのカスタマイズができるようパラメータで指定できます

 

ここで最初にお詫びいたします

 

あれこれとカスタムしていると記載の順位がランダムになってしまい
関連事の順位構成になっていません
又パラメータ指定の種類は数多くすべてを記載するには
多少時間をいただきたく願います
不足情報は 後程順次手順は追記してまいります

 

 

 

パラメータは以下の位置に配置します

 

<iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM"

 

パラメータ

 

frameborder="0" allowfullscreen></iframe>

 

 

どんなことが出来るかと 簡単な例

 

こちらでは 画面下に表示されるコントローラー内にユーチューブサイトへ
移動するロゴリンクがありますね

 

デフォルトの記述に modestbranding=1をつけ加えます

 

 

すると 以下のようにロゴが消えて歯車アイコン画表示されます

参考 記載例
<iframe width="420" height="315" src="//www.youtube.com/embed/lH4lc2JWDNM?modestbranding=1" frameborder="0" allowfullscreen></iframe>

 

modestbranding=1の数値を0にすると ロゴと歯車アイコンが同時表示

 

 


 

初期コードからですと記述に手違いなどもあることでしょう

 

ここからは あらかじめ記述を改行したものを配置して
カスタムしてまいります

 

 

以下コードを基本に改行します

 

<iframe width="420" height="315"src="http://www.youtube.com/embed/lH4lc2JWDNM?autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light"frameborder="0"allowfullscreen></iframe>

 

autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light

 

 

コントローラー背景を白くする

 

whiteが指定しています

 

<iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?autohide=1&color=white&rel=0&showinfo=0&start=20&theme=light" frameborder="0"
allowfullscreen></iframe>

 

 

スクリーンの明暗
lightの記述をdarkで指定する

 

 

 

プログレス指定バーシークレットバーやコントロールの表示 非表示の選択

 

プログレスバーで再生時間表示やコントロールバー 
動画下部に表示される部分

 

 

プログレスバー 
表示 非表示を選択するには autohide=???でを設定します

 

何れかを選択して???の箇所に記述

 

0:隠さない 表示 

 

1:自動的に隠す 非表示

 

2:プログレスバーだけを隠してしまう

 

 

 

コントローラーの表示 非表示

 

コントロールを表示 またh非表示を制御するには「

 

controls=???

 

???の箇所には以下のどちらかを配置します

 

0:コントロールを非表示

 

1:コントロールを表示する

 

 

 

 

フルスクリーンボタン表示に移動しない するの選択の表示 非表示

 

フルスクリーンボタンの表示 非表示の選択

 

fs=??? の追加

 

??? の箇所にどちらかを記述

 

0:フルスクリーンボタンを表示しない

 

1:フルスクリーンボタンを表示する

 

 

記述コード例をここから変えます

 

記述にもいろいろありまして ここから上記コードをさらに変えるには
説明しずらくなりました

 

そこで こちらを使う場合はそのままコピーして 
好みにカスタムしてください

 

 

 

 

手動で再生 自動再生だとうるさいので
コントロールバーを非表示にする

 

プログレスバー シークレットバーを非表示

 

タイトルバーも非表示
まとめてコントロール 0&showinfo=0ontrols

 

 

サイトを開いたと同時に動画スタート 自動再生にする場合は

 

autoplay=0 記述の0を1 にしてください

 

<iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?controls=0&showinfo=0&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe

 

以下が設定例

 

 


 

 

HDの通常画質ではなく高画質HD1080pで再生させています
1&vq=hd1080が指定記述

 

コントロールバーを自動的に隠すシークレット設定
0&controls=1

 

タイトルバーも非表示設定
0&showinfo=0

 

全画面表示ボタンを非表示設定
0&modestbranding=0

 

 

<iframe width="420" height="315" src="http://www.youtube.com/embed/lH4lc2JWDNM?rel=0&modestbranding=0&showinfo=0&fs=0&controls=1&autohide=1&vq=hd1080" frameborder="0" allowfullscreen></iframe>

 

設定例

 

 

 

スポンサーリンク

 

 

YouTube動画のパラメータカスタム
ユーチューブ動画をサイトに取り付ける方法
シリウスカスタマイズ

 

シリウスで表現するYouTube動画のパラメータカスタマイズ関連解説
YouTube動画をレスポンシブ化するコード改変とCSS指定
YouTube動画をシリウスに取り付けてもレスポンシブ化しませんが、改行すると自動縮小します。でも変化は2例ございますのでどちらかを選択
シリウスに取り付けたYouTube動画を自動再生にするカスタマイズ
シリウスサイトを開いたと同時にYouTube動画をクリックせずとも自動で再生するカスタマイズ設定の取り付け解説です