頑張らない!でも諦めない!必死にならずにええかげん

19_10.Youtubeプレーヤー表示には、Jetpackのyoutube動画ショートコード埋め込み

      2015/04/30

Google or AdMax Promotion(it)

WordPressで投稿の途中にYoutubeプレーヤーを埋め込みたいと思ったことはあるでしょうか。
WordPressではまだ埋め込んだことはありませんが、他のSNSではよく利用していました。
Youtubeのコンテンツ表示にもJetPackのショートコードが利用できます。
ショートコードで埋め込むことで様々なオプションを利用することができます。

はじめに

WordPressの投稿内にYoutubeプレーヤーを埋め込む場合には、
Youtubeのショートコードを利用することができます。

JetPackを利用してYoutubeの埋め込みを行うには、
JetPackでショートコード埋め込みを有効にする必要があります。
以下の投稿を参考に設定を行ってください。
19.ショートコード埋め込み-Jetpack by WordPress.com

Youtube埋め込みの利用するサンプル動画

Youtubeの埋め込みにおいても、直接URLを貼り付けることで、
ビデオプレイヤーを表示することができます。

また、ショートコードを利用すると様々なオプションを利用することができるようになります。

ここではWordPress.comヘルプに記載されている、
Youtube動画を例に埋め込み方法についてご紹介していきます。
利用する動画のURLは以下のURLを利用します。

http://www.youtube.com/watch?feature=player_embedded&v=JaNH56Vpg-A

Youtube埋め込みソースの利用

上記の動画サイトにアクセスすると、動画を埋め込む為のURLを取得するリンクを取得できます。
動画のサイトから[共有]をクリックします。

01_Youtubeからの共有

Youtubeからの共有

[共有]をクリックして表示される共有先に表示されているURLを利用します。
取得したURLは以下のようになっています。

02_共有URLの取得

共有URLの取得

また[埋め込みコード]をクリックすると<iframe>タグを利用した埋め込み用コードも取得できます。
取得したURLは以下のようになっています。

03_埋め込みコードの取得

埋め込みコードの取得

では順を追って埋め込みを行っていきます。

URL直接利用

URL直接指定では「共有」で取得したURLを直接投稿の本文エリアに貼り付けて設定します。
URLの貼り付けをおこなったら、念のためURLを一旦選択し[リンクを外す]をクリックしておきます。

04_投稿へURLの貼り付け

投稿へURLの貼り付け

実際に埋め込みを行うと以下の様に表示されます。
http://youtu.be/JaNH56Vpg-A

また動画サイトのURLを直接設定しても表示されます。
http://www.youtube.com/watch?feature=player_embedded&v=JaNH56Vpg-A

05_投稿へタグの貼り付け

投稿へタグの貼り付け

この場合の欠点は動画のサイズなどを指定することができないため、
デフォルトのサイズで表示されます。

スペースなどの都合でサイズ変更の必要がある場合には、他の埋め込み方法を選択します。

埋め込みタグを利用(JetPack不要)

[埋め込みコード]で取得したiframeタグを、WordPressのテキストエディタモードで貼り付けます。

06_動画サイトURLの確認とコピー

動画サイトURLの確認とコピー

実際に埋め込みを行うと以下の様に表示されます。
<iframe width="560" height="315" src="//www.youtube.com/embed/JaNH56Vpg-A" frameborder="0" allowfullscreen></iframe>

iframeを利用して埋め込む場合Youtubeのサイト側で
動画のサイズを変更することができます。

Youtubeの[埋め込みコード]の下に表示されているサイズ部分で表示したいサイズを選択します。
カスタムサイズを選択すると、サイズを入力できます。

07_動画のサイズ変更オプションとタグ

動画のサイズ変更オプションとタグ

フィールドに値を入力すると計算された縦横比にあった値が入力補完されます。
その為、縦横比を変更して埋め込むことはできません。

08_サイズ変更時の縦横比連動

サイズ変更時の縦横比連動

実際にサイズを640×360に変更して埋め込むと以下のように表示されます。
<iframe width="640" height="360" src="//www.youtube.com/embed/JaNH56Vpg-A" frameborder="0" allowfullscreen=""></iframe>

JetPackショートコードの利用

ショートコードを利用して埋め込みを行う際には様々なオプションを利用することができます。

動画URLによる埋め込み

Youtubeのショートコードを利用する場合には「共有」で取得したURLを、
ショートコードのパラメータに指定します。

実際に埋め込みを行うと以下の様に表示されます。

プレイリスト埋め込み

Youtubeのプレイリストを埋め込むことができます。
Youtubeの動画配信者が作成しているプレイリスト(再生リスト)のURLを確認します。

09_プレイリストURLの確認とコピー

プレイリストURLの確認とコピー



再生リストは自分で作成することもできます。また公開されているものを利用することもできます。
※プレイリストのURLを利用した場合、ショートコードを利用しなくても表示されます。

ショートコードを利用して埋め込む場合以下のように記述します。

実際に埋め込みを行うと以下の様に表示されます。
プレイリストを埋め込んだ場合、再生ボタンは「PLAY ALL」と表示されるようになります。

ショートコードを利用時に指定可能なオプション

ショートコードを利用した場合に利用可能なオプションは以下の通り利用できます。

縦横サイズ指定

ショートコードにて動画サイズの指定を行うことができます。
これは「埋め込みコード」にて取得する際に表示されるサイズ指定オプションと同じですが、
縦横比は自分で計算する必要があります。

10_サイズ指定オプション

サイズ指定オプション

次のように幅と高さを「width=”640″ height=”360″」と指定する場合、
ショートコードにURLを記述した後ろに「&w=640&h=360」と追記します。

実際に埋め込みを行うと以下の様に表示されます。
※以下は「w=853&h=100」として縦横比をずらして設定しています。
この場合、動画の縦横比は無視されます。

幅サイズ指定

縦横比の計算をする必要のない、幅のみを指定する方法があります。

ショートコードにて動画サイズの幅のみで指定を行うことができます。
上記のように、width=”640″ height=”360″を指定する場合、
ショートコードにURLを記述した後ろに「&w=640」と追記します。

実際に埋め込みを行うと以下の様に表示されます。

動画が終わったら関連動画を表示設定

動画の再生が終了したら関連動画が表示されますが、
その関連動画の表示をしないように設定することもできます。

このオプションは「埋め込みコード」のオプションに表示されている設定です。

11_関連動画表示オプション

関連動画表示オプション

ショートコードで設定するには「&rel=0」を追記します。

以下の動画は4:16(256秒)動画になりますので動画の開始を250秒として設定し埋め込んでいます。
6秒の再生終了後に以下のように表示が異なります。

12_関連動画の表示有無

関連動画の表示有無

関連動画あり

関連動画なし

再生開始位置指定

動画の再生開始位置を指定することができます。
これは「共有」ボタンでURLを取得した際に表示されている開始位置オプションと同じです。

13_開始位置指定オプション

開始位置指定オプション

関連動画の例でも利用していますが「&start=75」など秒数を指定することで、
あらかじめ再生スライダが移動した状態で動画を埋め込むことができます。

以下は実際に45秒開始で埋め込みを行っています。

 

再生開始終了位置指定

動画の再生終了位置を指定することができます。
「&end=5」などで指定すると指定した秒数に到達すると再生が終了されます。

以下は実際に再生から5秒で再生が終了されます。

 

ショートコードによって埋め込みを行うと、
Youtubeにて取得する埋め込みコードでは選択できないオプションを利用することができます。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

Youtubeの埋め込みは比較的よく見かけるもので、
<iframe>タグで埋め込んでしまえば簡単に埋め込めます。

しかしこうしたショートコードを利用することでもっと簡単に利用することができるようになります。

参考

YouTube — Support — WordPress.com


WordPressはWordPress Foundation の登録商標(第5049965号)です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - jetpack, WordPress , , , , ,

  関連記事