Single Tweet with Video - 動画をウェブサイトに埋め込む

公開日: 2017/01/22

Twitterの動画をウェブサイトやブログに埋め込む方法をまとめています。

Embedded a Single Tweet with a video-specific template: Twitter Developersのウェブサイト(英語)。動画を埋め込む方法について説明されています。

HTMLの場合

HTMLタグを記述してツイートを埋め込む方法を説明します。誰でもできる手軽な方法です。

プログラミング

コードの取得

埋め込みたい動画があるツイートの個別ページにアクセスして、メニューを開いて「動画を埋め込む」をクリックして下さい。

埋め込み用のHTMLコードが表示されるので、これをコピーして下さい。

コードの記述

次のようなHTMLをコピーできるはずです。これをウェブページのHTMLに記述すれば、その場所に動画が表示されます。

HTML

<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">ヤギの帰宅イベント(一瞬) <a href="https://t.co/JMbQQc097p">pic.twitter.com/JMbQQc097p</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/810834808892891136">2016年12月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

パラメータの指定

パラメータを指定するには、blockquote要素にdata-{パラメータ名}の属性を追加します。2017年現在、指定できるパラメータはlangのみです。例えば、これにenを指定すれば、UIが英語になります。

HTML

<!-- langのパラメータを追加 -->
<blockquote class="twitter-video" data-lang="en"><p lang="ja" dir="ltr">ヤギの帰宅イベント(一瞬) <a href="https://t.co/JMbQQc097p">pic.twitter.com/JMbQQc097p</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/810834808892891136">2016年12月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

デモを開く

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>Twitterの動画を埋め込むデモ</title>
	</head>
<body>

<h1>Twitterの動画を埋め込むデモ</h1>
<p>Twitterの動画を、ウェブサイトに埋め込んでいます。元のツイートは<a href="https://twitter.com/arayutw/status/810834808892891136" target="_blank">こちら</a>です。</p>

<!-- 動画を表示する -->
<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">ヤギの帰宅イベント(一瞬) <a href="https://t.co/JMbQQc097p">pic.twitter.com/JMbQQc097p</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/810834808892891136">2016年12月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</body>
</html>

デモを開く

デモ

langのパラメータの値を調整して、どのように反映されるのか確かめることができます。デスクトップの場合、右下にあるTwitter Birdをクリックした時にツイートの内容が表示されますが、その日付の表記の言語が変わります。

ヤギの帰宅イベント(一瞬) pic.twitter.com/JMbQQc097p
— あらゆ (@arayutw) 2016年12月19日

<blockquote class="twitter-video"
	data-lang="ja"
><p lang="ja" dir="ltr">ヤギの帰宅イベント(一瞬) <a href="https://t.co/JMbQQc097p">pic.twitter.com/JMbQQc097p</a></p>&mdash; あらゆ (@arayutw) <a href="https://twitter.com/arayutw/status/810834808892891136">2016年12月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

JavaScriptの場合

JavaScriptを利用して動画を埋め込む方法を説明します。動的に埋め込み表示したい場合に有用です。

プログラミング

ライブラリの読み込み

JavaScriptを利用するためのライブラリを読み込んで下さい。これは、HTMLの場合と同じものです。

HTML

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>

コンテナの用意

動画を表示するためのコンテナを用意して下さい。空要素じゃない場合、中身は表示された後も残るのでご注意下さい。id属性は後ほど要素を取得するために付けるものなので、名前は何でも大丈夫です。

HTML

<div id="tweet-video-container"></div>

メソッドを実行

専用のメソッド(twttr.widgets.createVideo)を実行すれば、指定したコンテナにTwitterの動画を埋め込み表示することができます。第1引数は表示するツイートのID、第2引数はコンテナの要素、第3引数はパラメータという順番で、引数を指定して下さい。動画がないツイートを指定した場合、何も表示されません。

JavaScript

// コンテナを取得
var container = document.getElementById( "tweet-video-container" ) ;

// 動画を埋め込み表示するメソッドを実行
twttr.widgets.createVideo (
	"810834808892891136" ,	// 第1引数: ツイートID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		lang: "ja" ,
	}
) ;

サンプルコード

HTML (index.html)

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScriptで埋め込み動画を表示するデモ</title>
	</head>
<body>

<h1>JavaScriptで埋め込み動画を表示するデモ</h1>
<p>JavaScriptを利用して、指定した場所にTwitterの動画を埋め込み表示するデモです。元のツイートは<a href="https://twitter.com/arayutw/status/810834808892891136" target="_blank">こちら</a>です。</p>

<!-- コンテナ -->
<div id="tweet-video-container"></div>

<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
<script>
// コンテナを取得
var container = document.getElementById( "tweet-video-container" ) ;

// 動画を埋め込み表示するメソッドを実行
twttr.widgets.createVideo (
	"810834808892891136" ,	// 第1引数: ツイートID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
		lang: "ja" ,
	}
) ;
</script>
</body>
</html>

デモを開く

デモ

値を調整して、どのように反映されるのか確認できます。他のツイートIDを変更してみましょう。

ヤギの帰宅イベント(一瞬) pic.twitter.com/JMbQQc097p
— あらゆ (@arayutw) 2016年12月19日

twttr.widgets.createVideo (
	"810834808892891136" ,	// 第1引数: ツイートID
	container ,	// 第2引数: コンテナの要素
	{	// 第3引数: パラメータ
//		lang: "ja" ,
	}
) ;

パラメータ

パラメータを指定すると、埋め込み動画の表示を調整できます。2017年現在、指定できるのはlangのみです。ウィジェットの右下にあるTwitter Birdをクリックした時にツイートが表示されますが、その日付部分くらいしか違いはありません。

lang: UIの言語を、言語コードで指定する。日本の場合はja、英語の場合はen。