特集
カテゴリー
タグ
メディア

Instagramに投稿した動画をブログなどに「埋め込む」方法

  • カテゴリー:
  • TOOL
Instagramに投稿した動画をブログなどに「埋め込む」方法

先日リリースされたInstagramの動画投稿機能はなかなか楽しいものです。最長15秒までの動画に、写真の時同様フィルタをかけて投稿できます。

Instagram上ではもちろん、FacebookやTwitterなどの連携サービスでの共有も可能です。ただ、YouTubeなどの一般的な動画サービスにある「埋め込み」の機能がついていません。ライバルといわれるVineにはついているのに、非常に残念です。

しかし、諦めるのはまだ早いです。テック系サイト「AddictiveTips」に、ブラウザの「要素の検証」機能を使った埋め込みタグの作成方法が載っていました。実際にやってみたので紹介します。

編注:著作権のことを考え「自身で投稿した動画」か「撮影者のOKをもらった動画」のみで試すようにしてください。まず、「要素の検証」機能があるブラウザで該当するInstagram動画を開きます。筆者はChromeを使いましたが、AddictiveTipsではFirefoxの「要素を調査」機能を使っていたようです。

動画上で右クリックをし、「要素の検証」を選びます。

動画上で右クリックをし、「要素の検証」を選びます

「Ctrl+F」(Command+F)で「mp4」という単語を検索しましょう。

「Ctrl+F」(Command+F)で「mp4」という単語を検索しましょう

そうすると次のようなフォーマットで、mp4ファイルとjpgファイルのhttp://からはじまるアドレスが見つかると思います。

<div class="Video  vStatesHide media-photo" src="http://distilleryvesper10-18.ak.instagram.com/0cc28294dcbd11e2957422000a1f8ac8_101.mp4" type="video/mp4" poster="http://distilleryimage10.s3.amazonaws.com/0cc28294dcbd11e2957422000a1f8ac8_7.jpg" controls="true" autoplay="true" id=".reactRoot[1].0.{photo485293621540264378_10867789}.[1]">

Video for Everybody Generator」にアクセスし、MP4 Videosにmp4のアドレス、Poster Imageにjpgのアドレスを貼り付けます。

サイズと、ファイルフォーマットも選択できます。今回は640×360で、HTML5とFlash両方に対応した形で出力することにしました。

Video for Everybody Generator

サイト下部にある「Source Code」右側にあるアイコンをクリックし、コードをコピーしてください。そして、それを自身のブログなどに埋め込んでみましょう。

これで完成です。実際にやってみるとそこまで手間もなく、他の動画でも気軽にできそうでした。自分で撮影した動画をブログなどでシェアしてみたいときなど、ぜひ試してみてください。

How To Embed Instagram Videos In Any Web Page | AddictiveTips

(五十嵐弘彦)

swiper-button-prev
swiper-button-next