WordPressでTwitchの動画を埋め込む方法

雑記

2021.10.252023.06.25

WordPressでTwitchの動画を埋め込みたいけど上手くいかない！

先日僕もかなり苦労したので解決策を記しておきます！

今後もTwitchのアップデートなどには要注意ですね。

Table of Contents

はじめに
僕の環境
埋め込み手順
さいごに

はじめに

先日コチラの記事を執筆する際に、せっかくだからTwitchの動画を埋め込んで読んでくれた人が試合のアーカイブにすぐ飛べるようにしよう！と思ったのが事の発端です。

見なきゃ損！VCT Masters Berlinベストバウト3選

面白すぎて僕の生活リズムをガッツリ破壊してくれた『VALORANT Champions Tour 2021: Stage 3 Masters - Berlin』毎晩名試合が繰り広げられ、日本勢も初勝利を掴むなど見所満載の大会でした！日本...

こんな風にですね。

Twitchと並ぶ超王手動画サイトだと、YouTubeはWordPressのブロックがありますよね。

なので、このYouTubeのブロックを使えば動画を埋め込めるということはわかります。

しかし、Twitchのはないんですよね。

なので、Twitchのページからコードを持ってきて、ブログの記事に埋め込む必要があります。

ただ、僕はこのステップのとある問題でかなり四苦八苦したので今回はその内容と今後のために記すとともに紹介しようと思います！

Twitchといえば今や最大手のストリーミングプラットフォームで、先ほどの記事で取り上げたVALORANTの公式大会を始めとした多くのE-Sportsシーンやゲーム配信が配信されています。

僕がメインでプレイしているFF14のレイドレースもTwitchで配信するのが主流ですし、僕が所属していたTAチームもTwitchで配信していたり、他にもFIFAやCoDもTwtichで配信する人気ストリーマーは沢山います。

ですからTwitchのアーカイブなどをブログに埋め込みたいシーンは今後もありそうですから常にアンテナをはっておきたいですね。

Twitterで自分をリストに追加できないトラブルの解決策

『このメンバーはリストに追加できません』このメッセージが表示されて、自分自身を自分が作ったリストに追加できない... こんなトラブルに見舞われましたが、無事解決できたので対処法を備忘録として残しておきます！僕が遭遇したトラブル今回僕が...

僕の環境

先に僕の環境を紹介しておきます。

といっても、今回の手順を行うにあたって特別なプラグインなどを導入したわけではないので、紹介するのはWordPressのバージョンとテーマの種類・バージョンになります。

WordPress : バージョン 5.8
テーマ：Cocoon : バージョン 2.3.6

この環境ではYouTubeの埋め込みブロックはあってもTwitchの埋め込みブロックはないので、後述の手順で埋め込みを行いました。

埋め込み手順

実際に僕が行った埋め込み手順は以下の通りになります。

Twitchのアーカイブでシェアから埋め込みをクリック
iframeを使用の文をコピー
ブログ記事編集画面でカスタムHTMLのブロックを選択
コピーしたiframe分を張り付け
www.example.comを自身のドメインに書き換え

もう少し詳しく説明していきますね。

Twitch側

まず、埋め込みたい動画のページをTwitchで開いて、シェアを選びます。

そして、埋め込みを選んでクリックしましょう。

この時、再生を始めたい場所が決まっている場合は8:00:18へスキップの部分を好きな時間にし、チェックボックスが紫になるようにチェックを入れます。

埋め込みを選ぶとこの様な画面が出るので、下側のiframeを使用の方に書いてある文を全てコピーします。

これでTwitch側で行う操作は終了です。

ブログ側

それでは、ブログ側の操作になります。

こちらはシンプルで、記事の挿入したい箇所にカスタムHTMLのブロックを挿入します。

恐らくHTMLを挿入するブロックなら大丈夫だと思いますよ。

そして、先ほどコピーした文を貼り付けましょう。

すると、この様な感じの文が貼られていると思います。

<iframe src="https://player.twitch.tv/?video=1147137504&time=8h0m15s&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

この文の中に、赤字で示したwww.example.comという部分があるので、これを自身のドメインに変更します。

例えば、僕のブログの場合はbunchiry.comというドメインですから、ここをbunchiry.comに変更しました。

こういう感じですね。

<iframe src="https://player.twitch.tv/?video=1147137504&time=8h0m15s&parent=bunchiry.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

これで埋め込みは完了です！

ちなみに、この文のheightとwidthの数字を変更すると動画のサイズを変更することもできるますね。

ただ、Twitch側の規約があるのでそこは気をつけましょう。