自分のブログやサイトにTwitchチャンネル、ビデオを埋め込む方法

2017-09-13

どうも！もこと(@moko7days)です！

もことはTwitchでの活動を広めるためにブログを書いています。そうなると当然、Twitchの情報をブログに乗せたくなるわけです。

もっと直球に言うと、Twitchのチャンネルページや過去動画をブログにかっこよく貼り付けたいわけです。

そこでHTMLやCSSからいじり始めると、とてつもない労力がかかるので、今回はTwitchが用意してくれている埋め込み機能の紹介です。

チャンネルページの埋め込み方法

まずはTwitchの配信ページであるチャンネルページの埋め込み方法から。チャンネルページは配信が始まったときに、映像が映る場所なので言わば観客席みたいなものです。

Twitchにログインしたら、右上の三角ボタンをクリックして「チャンネル」をクリックします。そうすると自分のチャンネルページに飛べます。

そうしたらシェアボタンをクリックすると「チャンネルを埋め込む」という項目の下にiframeから始まるコードがありますので、それを自分のブログやサイトにコピペするだけ！

これが実際にチャンネルページを埋め込んだMo/codeのトップページの様子

配信が始まったらブログに埋め込んだチャンネルページも動くはずなのですごく楽しみ！

次はコメント欄の埋め込み方法です。

勘のいいひとはお気づきでしょう。先ほどチャンネルページを埋め込むとき、下に「コメントを埋め込む」欄が見えたと思います。

コメントを埋め込むの下にあるコードをブログやサイトにコピペすればいいだけです。

次はビデオの埋め込み方法です。Twitchでビデオというのは基本的に過去の配信のアーカイブのことをです。

ビデオの埋め込み方法も簡単です。まずは右上の三角ボタンを押して、ビデオマネージャーをクリックします。

ビデオ一覧の画面が表示されると思うので、その中からブログやサイトに埋め込みたいビデオをクリックします。

そのあとはチャンネルページの埋め込み方と同じで、シェアボタンをクリックした後にビデオを埋め込む欄の下にあるコードをコピペしましょう。

このとき、ビデオのリンクを間違って貼らないように気を付けてください。

ビデオをアップロードするさいに一つ注意点があります。

それは「ビデオは一定期間が過ぎると削除される」ということ。

Twitchに認められた配信者Twitchパートナーの人は60日。それ以外の配信者のビデオは14日の間だけ保存されます。

つまり、14日以降はビデオの視聴ができなくなります。当然、ブログやサイトに埋め込んだビデオも見れなくなってしまいます。

視聴期限対策の方法として、ビデオをアップロードする方法があります。

アップロードとはTwitch上に動画をアップロードして、永遠に視聴できるようにするサービスです。

まず、アップロードしたい動画をビデオマネージャーからダウンロードしてきます。ビデオマネージャーの画面で、ダウンロードしたいビデオの「さらに表示」をクリックします。

ダウンロードをクリックすると、ダウンロード準備が始まりますので、ダウンロードを開始になったらクリックして動画をダウンロードしてください。

ダウンロードが終わったら、動画をアップロードしましょう。

アップロード画面にいき、アップロードしたい動画をドラック＆ドロップしたら終わりです！

あとはビデオを埋め込んだ時とおなじようにすれば、ブログやサイトに動画を埋め込めます！アップロードした動画はTwitchがなくならない限りは見れるので、消したくない過去の配信はアップロードしておきましょう。

いや～これでブログでもことの活動をアピールしやすくなったなった。

ブログ上でもことの配信が見えるって少しワクワクするね！