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

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を取得するリンクを取得できます。
動画のサイトから[共有]をクリックします。

Youtubeからの共有

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

共有URLの取得

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

埋め込みコードの取得

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

URL直接利用

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

投稿へURLの貼り付け

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

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

投稿へタグの貼り付け

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

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

埋め込みタグを利用（JetPack不要）

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

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

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

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

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

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

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

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

実際にサイズを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を確認します。

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

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

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

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

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

縦横サイズ指定

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

サイズ指定オプション

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

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

幅サイズ指定

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

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

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

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

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

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

関連動画表示オプション

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

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

関連動画の表示有無

関連動画あり

関連動画なし

再生開始位置指定

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

開始位置指定オプション

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

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

再生開始終了位置指定

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

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

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

さいごに

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

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

参考

YouTube — Support — WordPress.com

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

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

最後までお読みいただきありがとうございました。

お勧めさせて頂きたい投稿です

• 【巧妙な仕組】Google+へAndroidの写真が勝手にアップロードされてしまう流れは設定ミスではない

• JetPackサイト統計データが消えた場合に復活する手順(してもらう)

• 【待望】WALLET ポイントがauID(au電話番号)間で相互にやりとりできるようになりました

• 禁断の機能がau公式解禁！WALLETポイントの現金化がついに開放。

• 何もしないと、auポイントが2014/05月分以降は携帯利用料から付与されなくなります

• au WALLET™カードはauを解約してもプリペイドとして使い続けられるが、有効期限には注意

• じぶん銀行が動いた！コンビニATM利用が無料・他行振込無料（回数制限なし）で使える

• 【旬】「白すぎる」と賛否両論？姫路城見るなら今秋がおすすめ！その理由は？｜castlehimeji.com

• Google+の投稿が勝手に自動でブログになっていくPluCialが便利



アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介

すべて展開 | すべて省略

Rakuten Promotion

ページ

すべて展開 | すべて省略