【Twitch】自分の配信をブログやHPに埋め込む方法（最新版）

みなさんおはこんばんちは(＠ReinyaNchannel)です

配信をこよなく愛している者です。Twitchという配信サイトで活動しています。是非以下のからフォローお願いします

• https://www.twitch.tv/reinyan_channel

Twitchの配信を自分のブログに埋め込む方法を知りたいそこのあなた教えてあげます

ごめんなさい。上目線でした

自分の配信をブログやHPに埋め込む方法になります

結構簡単なのですが、案外見落としがちなところがあるのでそこだけ注意していれば簡単にブログ等に配信を埋め込む事ができます

では、説明に入ります

Twitchの配信をブログに埋め込む方法

手順を追って説明していきます

右下のシェアマークをクリック

埋め込むを選択する

手軽に使えるiframeを使って配信を埋め込んでいきます

埋め込む際にコードを編集していく

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

変更するコードは以下のところの一部変更してあげる

上記のコードの一部変更する場所は

 iframe
parent=www.example.comのところを
parent=25reinyan25.netにする

変更したらこのようになります

埋め込むとこのように埋め込まれる

JavaScriptでも埋め込み可能

ぶっっちゃけJavaScriptの方が楽です

イジるーコードがないので、ただコードを貼り付けるだけの簡単な作業です

あとはサイバーやウィジェットにJavaScriptコードを貼り付けるだけです

お疲れ様でした

ミュートで配信を埋め込む方法

以下のコードは筆者の埋込コードです（基本的にどのコードもこれがテンプレになります）

 JavaScript
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

<!-- Create a Twitch.Player object. This will render within the placeholder div -->
<script type="text/javascript">
  new Twitch.Player("twitch-embed", {
    channel: "reinyan_channel"
  });
</script>

では、ミュートをするための魔法のコードをぶち込みます

 JavaScript
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

<!-- Create a Twitch.Player object. This will render within the placeholder div -->
<script type="text/javascript">
  new Twitch.Player("twitch-embed", {
    channel: "reinyan_channel",
    muted: ture
  });
</script>

赤文字が追加するコードです

これでブログを閲覧している読者でも配信を忍者みたく、ひっそり埋め込むことが出来ます

チャットも含んだコードも載せておきます

1. <!-- Twitch Channel Embedded-->
2. <div class="row" align="center">
3.   <h2>My Twitch Channel</h2>
4.   <!-- Add a placeholder for the Twitch embed -->
5.    <div id="twitch-embed"></div>
7.    <!-- Load the Twitch embed script -->
8.    <script src="https://embed.twitch.tv/embed/v1.js"></script>
10.    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
11.    <script type="text/javascript">
12.      new Twitch.Embed("twitch-embed", {
13.        width: "100%",
14.        height: 480,
15.        channel: "daisychaincosplay",
16.        muted: true
17.      });
18.    </script>
19.    <!-- More Embed Options: https://dev.twitch.tv/docs/embed/ -->
20.  </div>

ソースは以下のブログから参考にしています

別のチャンネルを埋め込みたい場合は

例えば自分のブログ等に別のチャンネルを埋め込みたい場合は以下にコードをいじってあげる

 
<iframe src="https://player.twitch.tv/?channel=reinyan_channel&parent=25reinyan25.net" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

変更する場所はここ

 
<iframe src="https://player.twitch.tv/?channel=ここに別のチャンネルのID&parent=25reinyan25.net" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

まとめ

結構見落としになる場合が多いかと思いますが、ちゃんと見ればわかる部分でもあります

筆者も最初は戸惑いましたが、よくよくコードを見たら自分のドメインに変更する場所があるのでそちらに自分のドメインを打ち込んだら自分のブログに自分の配信を埋め込むことが出来ます

自分のブログに配信を埋め込みたい人は参考になれば幸いです

では、なにかありましたら記事をあげます