【ブログ用】twitchのクリップ動画の埋め込みと画面サイズの変更、自動再生の解除方法など

twitch埋め込み

twitchの動画埋め込みをしようとしたら、思ったように貼れるまで若干迷ったので備忘録を書いておきます。

YouTubeやTwitterは埋め込みコードがコンテンツのすぐ下に書いてあるんですが、twitchで右下を見てもSNSシェアのリンクしかなかったので直接動画のURLを貼るしかないか？とまず思いました。

それが手段１。結果的にはtwitchの別のページから埋め込み用コードを取得できたのでそちらの手段２を推奨します。

動画をプレーヤーとして埋め込む

動画URLを直接取得する（手段１）

F12を押して動画URLを直接取得し、それをコピペして貼る方法です。URLの取得が若干面倒。若干ね

埋め込みコードを取得（手段２）

①の「https://www.twitch.tv/」の方のクリップだとなぜか埋め込みコードが表示されないので、クリップタイトルをコピペして②の「https://clips.twitch.tv/」の後に貼り付けて移動します。

こっちのページだとシェアボタンの横に「さらに表示」というボタンがあり、埋め込みコードを取得できるようになっています。最初これに気付かなかった(^^;

追加で設定した方が良い項目

表示するサイトの指定

2020年7月追記：「&parent=pontako.com」※うちのブログの場合

いつの間にか、これを記述しないと正常に埋め込みが機能しなくなっていました。

というわけで、下記のように自分のサイト名を埋め込みコードの中に記述しましょう。

自動再生の解除

デフォルトだと、記事内でスクロールして動画位置に来るとその動画が勝手に再生されてしまうので、何本も連続で貼り付けると一気に全部再生されて非常に鬱陶しい事になります。

「&autoplay=false」これを動画タイトルに付与することで自動再生を解除できます。

埋め込みプレーヤーのサイズ

だいたいの放送は16:9の画面比率だと思うので、デフォルトの「height=”378″ width=”620″」だと16:10になってしまい、黒帯が上下に付いてしまいます。

ヨコが620だとタテは348にした方が良さそうです。「height=”348″ width=”620″」

以下が面倒な人はここまででOK。

ここまでの方法でサイズ変更をすると、動画のレスポンシブ対応が出来ていないのでスマホで見た時にはみ出たりする場合があります。

要するに動画サイズが固定されているのでページ幅に合わないんですが、iframeはwidthを%表記にしても%に対応していないので、もうひと工夫する必要があります。

下記の記事に埋め込み動画プレーヤーのレスポンシブ化の方法を書きましたのでそちらを参照してください。

【ブログ用】YouTubeなどの動画の埋め込みとプレーヤーサイズをレスポンシブ対応にする方法

YouTubeやTwitchなどの動画をブログに埋め込む際の方法と、ブログに埋め込んだ時に表示されるプレーヤーのサイズをレスポンシブに対応させる方法の紹介です。デフォルトだと動画のレスポンシブ対応が出来ていないのでスマホで見た時にはみ出たりする場合があります。要するに動画サイズが固定されているのでページ幅に合わないんですね。