WordPress に Twitter Video を 動画埋め込みする3つの方法

Twitter Video の動画埋め込み

Twitter の動画は、 Vine という6秒までの繰り返し再生するものがありましたが、もう少し長い30秒までの繰り返しのない動画が投稿できるようになったようです

動画投稿ツイートは iPhone か Android 上の専用アプリから簡単にできるようです

Videos on Twitter | About

いまだにガラケーの私は使えないのですが、ツイートされた Twitter Video をブログに埋め込むことは出来ます (^^)

今回は、そんな Twitter Video を WordPress に動画として埋め込むための3つの方法について紹介します

  1. ツイートから動画埋め込みコードを取得
  2. Twitter の公式プラグインのショートコード使用
  3. function.php に埋め込み用のフィルター関数を設置

 

You can now shoot, edit and share video on Twitter. Capture life’s most moving moments from your perspective. pic.twitter.com/31JoMS50ha

— Twitter (@twitter) 2015, 1月 27

 

ツイートから動画埋め込みコードを取得

ツイートをブラウザで表示させて (その他)マークをクリックすると表示されるメニューから 動画を埋め込む を選択します

ツイートのその他メニューの動画埋め込み選択

 

埋め込み用のコードが表示されるのでコピーします

ツイートの動画埋め込みコード

 

WordPress の投稿編集画面で テキストモード に切り替えてコピーしたコードを貼り付けます

動画埋め込みコードの貼り付け

 

これだけで簡単に動画を埋め込めますが、ビジュアルモードを使っている人には、モード切り替えをしなくてはならないのと編集画面上で動画を確認出来ないという問題があります

 

Twitter の公式プラグインのショートコード

Twitter 公式プラグインをインストールします

Twitter
Official Twitter plugin for WordPress. Embed Twitter content and grow your audience on Twitter. Requires PHP 5.4 or greater.

プラグインを有効化したら、ツイートURLの最後のID部分だけをコピーして、投稿編集画面でショートコードにIDとしてセットします

Twitter公式プラグインの動画埋め込みショートコード

これで簡単に動画を埋め込めますが、この場合も編集画面上で動画を確認出来ません

また、ツイートボタン等の機能は他のプラグインを既に使っている場合も多いので、動画埋め込みだけのためにこのプラグインを入れるのも気が進まないかも知れません

 

function.php に埋め込み用のフィルター関数を設置

これが今回おすすめする方法です (^^)

もともとWordPress は、ツイートURLを入れるだけで埋め込み表示してくれる機能 があります

こんな感じにURLを入力すると

wordpress標準のツイートURLによる埋め込み

 

こんな感じで表示されます

wordpress標準の埋め込まれたツイート表示

 

これを動画の埋め込み形式にするには、oEmbed 実行時に widget_type=video を付ければ良いようです

Embedded Video
An embedded video brings the best video content created on Twitter into your article or website in a video-optimized Tweet display.

You can now shoot, edit and share video on Twitter. Capture lifes most moving moments from your perspective. pic.twitter.com/31JoMS50ha

中段ぐらいに下記説明があるので、従来の oEmbed 機能が使えそうな感じです

twitter_video埋め込み用oEmbed例

ということは、こんな感じで&widget_type=video を付けるだけで何もしなくても WordPress でうまい具合に処理してくれて動画形式で表示されるかも

wordpressのツイートURLに動画用のパラメータを指定

やってみると残念ながら表示されません (>_<)

 

何故うまく行かないか追いかけてみるとWidget_type=video 部分がうまく伝わっていないことがわかったので、フィルター関数を作って正常に伝わるようにしてみました

使用しているテーマの function.php に下記コードを追加すれば機能します

/**
 * oEmbed twitter-video 動画埋め込み形式の表示
 * 埋め込みURLの最後に &widget_type=video がセットされていたら正しく oembed 要求するように再構成する
 **/
function oembed_fetch_twitter_video( $provider, $url, $args ) {

    if(preg_match('#(https?://twitter.com/.+?/status/[0-9]+)&.*widget_type=video#i', $url, $match)){
        $url = $match[1];
        if(preg_match('#https://api.twitter.com/1/statuses/oembed.json?maxwidth=[0-9]+&maxheight=[0-9]+&url=#i', $provider, $match))
            $provider = $match[0] . $url . '&widget_type=video';
    }
    return $provider;
}
add_filter( 'oembed_fetch_url', 'oembed_fetch_twitter_video', 10, 3);

※Celtispack プラグインを使用している方は少しお待ち頂ければ、次のバージョンアップ時にこの機能を盛り込む予定です

3/12 修正 正規表現を間違えてたので修正しました m(__)m

 

これで、ツイートURLに &widget_type=video を付ければ動画形式で表示されるようになります (^^)

通常の埋め込みと動画埋め込みの表示

編集画面でも確認出来ますし、通常の埋め込みにするか動画の埋め込みにするかも使い分けられるのでいい感じです (^^)

以上

Twitter Video の動画埋め込みについて紹介しました

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss