RubyでYouTubeのURLからIDを抜き出してページにiframeで埋め込む

2021-09-11

概要

YouTubeのURLからIDを抜き出してiframeで埋め込む実装をしたので、そのまとめ。正規表現とiframeで実装。

YouTubeのURLパターンは以下のとおりらしい。

この中でIDは「nXl6Cbl6hHA」なので、この5つのパターンから正規表現でIDを抜き出す。

IDを抜き出す正規表現は以下のとおり。

(?:https:\/\/www\.youtube\.com(?:\/embed\/|\/watch\?v=)|https:\/\/youtu\.be\/)([^\n\r&]+)

ざっくり全体像を見ると、

・IDとID以外の部分で2つに分けている

という感じの正規表現になっている。

ID以外の部分 → (?:https:\/\/www\.youtube\.com(?:\/embed\/|\/watch\?v=)|https:\/\/youtu\.be\/)
ID → ([^\n\r&]+)

さらに細かく分けるとID以外の部分が

https://www.youtube.comの部分 → (?:https:\/\/www\.youtube\.com)
embedもしくはwatchの部分 → ?:\/embed\/|\/watch\?v=
https://youtu.beの部分 → https:\/\/youtu\.be\/

の3つに分かれている。

()はグループ化するための記号。matchで抽出したときにグループ化してくれる。こんな感じ。

s = "aiueo"
r = /(ai)(ueo)/

s.match(r)
=> #<MatchData "aiueo" 1:"ai" 2:"ueo">

グループ化はしたいけど使わないのでキャプチャしたくない場合は、(?:)を使う。

s = "aiueo"
r = /(?:ai)(ueo)/

s.match(r)
=> #<MatchData "aiueo" 1:"ueo">

“ai”が除外されていることがわかる。

iframeの実装はシンプル。

<iframe
  src="https://www.youtube.com/embed/YOUTUBE_ID?loop=1&playlist=YOUTUBE_ID"
  allowfullscreen loading="lazy"
>
</iframe>

埋め込み YouTube 動画の再生後の関連動画を改善して欲しいを参考に、離脱や別動画への遷移を防ぐためにパラメータを設定。

遅延読み込み。

ただLightHouseではあまり効果がなく、iframeで動画を埋め込んだら3~6ポイントくらい下がった。

同じ動画をループさせるパラメータ。

単一動画プレーヤーの場合に1を設定すると、最初の動画が繰り返し再生されます。再生リストプレーヤーまたはカスタムプレーヤーの場合、再生リスト全体を再生した後、最初の動画からもう一度再生が始まります。

同じ動画をもう一度再生させる。

このパラメータには、再生する動画IDをカンマ区切りのリスト形式で指定します。値を指定すると、URLパスのVIDEO_IDに指定した動画が最初に再生され、playlistパラメータに指定した動画はその後に再生されます。