PLUS1WORLD

Vine の動画をブログやWebページに埋め込む方法

vine-embed-0010

今週、Twitter 公式動画共有アプリである Vine の動画が埋め込み可能になりました。

6秒動画のVine、ウェブへの埋め込みをサポート。FacebookやTwitterへの共有機能も拡充 | TechCrunch Japan

この機能追加によって、Vine にあなた自身が投稿した動画やあなたお気に入りの動画を自分のブログやウェブサイトに貼り付けて紹介することが出来るようになりました。

今回はこの Vine の動画をページに埋め込むまでの手順を解説します。

広告

Vine の動画をページに埋め込む

動画をページに埋め込むためのコードを取得できるページにたどり着く方法は2つあります。

1. Vine のアプリからコード取得ページヘ移動

Vine のiPhoneアプリから埋め込みコード取得ページのURLを得るにはまず、埋め込みたい動画の右下のボタンを押します。

vine-embed-0001

右下のボタンを押すと、メニューが表示されます。

vine-embed-0002

メニューの中から「Share this post」を選びます。

vine-embed-0003

「Embed」を選びます。

vine-embed-0009

埋め込みコードを取得出来るページのURLを含んだメール送信フォームが表示されます。宛先に自分のメールアドレスを入力し送信しましょう。受け取ったメールから埋め込みコード取得ページヘ移動してください。

2. 投稿した動画のURLからコード取得ページヘ移動

また、Vine の動画を他のSNSで共有した時に出力されるURLからも埋め込みコード取得用ページに移動出来ます。

vine-embed-0004

Twitter などで共有した際のURLからVineの動画ページに移動します。

vine-embed-0005

移動した先の動画ページの下の方に「<>Embed」ボタンがあります。このボタンを押して、埋め込みコード取得ページヘ移動しましょう。

埋め込みコード取得ページ

vine-embed-0006

埋め込みコード取得ページでは「実際に埋め込んだ際にどう表示されるか」を確認しながら、コードの取得ができます。

vine-embed-0007

埋め込む動画のデザインは「Simple」「Postcard」の2つから選びます。選べるサイズは600px(ピクセル)、480px、320px、の3つです。

実際に埋め込むと、このように表示されます。

vine-embed-0008

埋め込み用のコードはページの一番下に表示されているので、細かい設定をした後にコードをコピーして、動画を表示したいページの埋め込みたい場所に貼り付けてください。

Vine の動画を外部で表示

毎日Vine で動画を撮影しブログに日記として貼り付けて残すといったこともこれから可能になります!

文章や写真では表現しにくいけど、YouTubeに動画を上げるほどではない場合は、Vineを使ってみるのもアリですね!

Vine の短い動画を様々な場所で共有しやすくなったので、Vine の楽しみ方も今回広がりました! 活用してみましょう!