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の仕様が変更することもございます、ご注意ください。
以上です。
本日は、そのプレイヤーのちょっと使えるテクニックを紹介したいと思います。
テクニックは次の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の仕様が変更することもございます、ご注意ください。
以上です。