BlogWEBサイト運営お役立ちブログ

Youtebeでちょっと使えるテクニック!!

WEBサイトやブログに動画を貼り付けられるyoutubeの埋め込みプレイヤー(以下、プレイヤー)。


本日は、そのプレイヤーのちょっと使えるテクニックを紹介したいと思います。

テクニックは次の4つ
・自動再生
・繰り返し再生
・開始時間指定
・テーマの設定

その前に前・・・

まずはご存知ない方のために
WEBサイトにプレイヤーを埋め込む方法を説明します。

既にご存知の方はこちらから飛ばしてください。




/************************************************************/

①動画ページを表示
目的の動画のページを開いてください






②コードを取得
「共有」→「埋め込みコード」とクリックしていくと





青く反転している部分が「埋め込みコード」です(以下、コード)。
書きだすと以下のようになります。

<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI"
frameborder="0" allowfullscreen></iframe>



③コードを編集
次に「動画サイズ」と「付加情報」を設定します。




・動画サイズ
サイズは「420x315、480x360、640x480、960x720」とあります。

合うサイズがない場合は「カスタマイズ」を選択してください。
新たに入力欄が表示されるので、そちらに値を入力できます。


・付加情報
サイズ直下にある3つのチェックボックスになります。
詳しく説明すると長くなるので簡単に説明します。

□動画が終ったら関連動画を表示する
 ⇒再生終了後に関連動画一覧を表示するかの有無です。

□プライバシー強化モードを有効にする
 ⇒動画観覧情報に関する設定です。情報を残したくない場合は有効にしてください。

□以前の埋め込みコードを使用する
 ⇒古いブラウザ向けであり、特にチェックする必要はありません。


「動画サイズ」、「付加情報」などを変更すると
コードへ自動的に反映されます。



④コードを貼り付ける

編集が完了したコードをコピーし、WEBサイトに貼り付けます。




a-spccだと管理画面から入力していただければ、サイトに反映されます。


/************************************************************/



さて、前置きが長くなりましたが、
ここから本題(=テクニックの紹介)になります。
テクニックは、すべてコード内の値に一文を付け加えることで機能します。

●自動再生
ページを開いた際に自動で再生されるよう、設定します。

 autoplay=1

こちらを以下のようにコードへ追加してください。

コード例)
<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI?autoplay=1"
frameborder="0" allowfullscreen></iframe>




●繰り返し再生
リピートして再生することができます。

 loop=1&playlist=★★★

★★★には、動画IDを入力してください。
動画IDはURLの
http://www.youtube.com/watch?v=★★★
↑の部分になります

コード例)

<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI?loop=1&playlist=VbSUaMj4GsI"
frameborder="0" allowfullscreen></iframe>



こちらの例では動画IDは「VbSUaMj4GsI」となります



●開始時間指定
動画の開始する位置を指定することができます。
こちらは「自動再生」と併用して使われることがあります。
指定できるのは秒単位であり、1分30秒では90(60+30)となります。

 start=90

コード例)

<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI?start=90&autoplay=1"
frameborder="0" allowfullscreen></iframe>





●テーマの設定
通常プレイヤーの様相を変更することができます。「light」と「dark」の2種類があり、通常は「dark」です。




わかりにくいですが下部のコントローラーのところが少し薄いです
 theme=light

コード例)
<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI?theme=light"
frameborder="0" allowfullscreen></iframe>




最後にこれらのテクニックを使った実例を一つ。



テーマは「light」、再生が30秒から、繰り返し再生となっています

コード)
<iframe width="420" height="315"
src="//www.youtube-nocookie.com/embed/VbSUaMj4GsI?theme=light&start=30&loop=1&playlist=VbSUaMj4GsI"
frameborder="0" allowfullscreen></iframe>


今回ご紹介するテクニックは以上になります。
Youtubeの仕様が変更することもございます、ご注意ください。

以上です。