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

twitch埋め込み

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

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

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

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

動画URLを直接取得する(手段1)

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

この方法で動画URLだけを貼った場合のプレーヤー↓

シンプルだけどtwitchページなどへのリンクはありません。


埋め込みコードを取得(手段2)

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

https://www.twitch.tv/”配信者ID”/clip/”クリップタイトル”
https://clips.twitch.tv/”クリップタイトル”

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

こんな形式のコードです↓
<iframe src=”https://clips.twitch.tv/embed?clip=DiligentInquisitiveReubenPupper&parent=example.com” frameborder=”0″ allowfullscreen=”true” height=”378″ width=”620″></iframe>
この方法で貼ったプレーヤーはこんな感じ↓

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

表示するサイトの指定

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

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

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

使用例
<iframe src=”https://clips.twitch.tv/embed?clip=DiligentInquisitiveReubenPupper&parent=pontako.com” frameborder=”0″ allowfullscreen=”true” height=”378″ width=”620″></iframe>

自動再生の解除

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

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

使用例
<iframe src=”https://clips.twitch.tv/embed?clip=DiligentInquisitiveReubenPupper&parent=pontako.com&autoplay=false” frameborder=”0″ allowfullscreen=”true” height=”378″ width=”620″></iframe>

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

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

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

サイズ変更例
<iframe src=”https://clips.twitch.tv/embed?clip=DiligentInquisitiveReubenPupper” frameborder=”0″ allowfullscreen=”true” height=”348″ width=”620″></iframe>

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

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

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

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



この記事で説明した事を埋め込みコードに適用した場合のプレーヤーはこのようになります↓

良い感じに見やすくなりました!

PR

おすすめ

コメントを残す

メールアドレスが公開されることはありません。