YouTube 動画のリンクから埋め込みプレーヤーを生成する

投稿日：

更新日：

ラベル：Web 制作

以前、【Blogger】コメント本文の URL をリンク化するという記事を書いた。このカスタマイズのおかげで、サイトの URL をそのままコメントフォームに貼り付けても、投稿後のコメント表示ではちゃんとリンク化されるようになった。

ただし、この方法で作ったリンクの内部テキストは当然 URL のまま。リンク先がどんなサイトなのかわかりにくい。特に YouTube 動画へのリンクなんかは、警戒されてなかなかクリックされない気がする。

リンクの代わりにプレーヤーを表示したら動画を観てもらいやすくなるのでは？と思ったので、YouTube 動画のリンクから埋め込みプレーヤーを生成する方法を考えてみた。

YouTube 埋め込みプレーヤー生成スクリプト

以下のように .yt-link の中に a 要素があったときに、YouTube 動画のリンクから埋め込みプレーヤーを生成するスクリプトが反応する。実際には [動画 ID] の部分は11桁の文字列に、[開始秒数] の部分は数字に置き換わる。

<div class="yt-link">
  <a href="https://youtube.com/watch?v=[動画 ID]?t=[開始秒数]">[内部テキスト]</a>
</div>

はじめはページ上の YouTube へのリンク全てを対象にしようと思ったが、文章中にリンクがあるときに表示がとんでもないことになるのに気付き、特定の要素内のリンクのみに変更した。

こちらが JavaScript のコード。通常の動画はもちろん、ショート動画（YouTube ショート）にも対応している。

const url_regex = /https?:\/\/(www\.|m\.)?(youtube\.com\/(watch\?v=|shorts\/)|youtu\.be\/)([\w-]{11})/;
const time_regex = /[?&]t=(\d{1,5})/;
const links = document.querySelectorAll('.yt-link a[href*="youtu.be/"], .yt-link a[href*="youtube.com/watch?v="], .yt-link a[href*="youtube.com/shorts/"]');
links.forEach(link => {
  const href = link.href;
  if(url_regex.test(href)){
    const id = href.match(url_regex)[4];
    const time = time_regex.test(href) ? '?start=' +  href.match(time_regex)[1] : '';
    const value = !/\/shorts\//.test(href) ? [480, 270, 'yt-video'] : [270, 480, 'yt-short'];
    const iframe = `<iframe src="https://www.youtube.com/embed/${id}${time}" width="${value[0]}" height="${value[1]}" class="${value[2]}" loading="lazy"></iframe>`;
    link.insertAdjacentHTML('afterend', iframe);
  }
})

YouTube の動画 ID を抽出するための正規表現 url_regex に a 要素の href 属性がマッチしたら iframe を生成する処理に移り、また、URL に開始秒数が設定されている場合は正規表現 time_regex で秒数も抽出するようにした。

こうして抽出した動画 ID と開始秒数を基に埋め込みプレーヤーが生成され、元々あったリンクの後ろに挿入される。

通常の動画の場合に生成される iframe はこちら。縦横比は 9:16 で、クラス名 .yt-video が付与されている。

<iframe src="https://www.youtube.com/embed/[動画 ID]?start=[開始秒数]" width="480" height="270" class="yt-video" loading="lazy"></iframe>

ショート動画の場合に生成される iframe はこちら。縦横比は 16:9 で、クラス名 .yt-short が付与されている。

<iframe src="https://www.youtube.com/embed/[動画 ID]?start=[開始秒数]" width="270" height="480" class="yt-short" loading="lazy"></iframe>

埋め込みプレーヤーのパラメータは最低限にしたが、以下のページを参考にして項目を増やしてもよさそう。

CSS の一例はこんな感じ。

.yt-video, .yt-short{
  display: block;
  margin: 40px auto;
}
.yt-video{
  width: 80vw;
  height: calc(80vw * 9 / 16);
}
.yt-short{
  width: 80vw;
  height: calc(80vw * 16 / 9);
}
@media(min-width: 600px){
  .yt-video{
    width: 480px;
    height: 270px;
  }
  .yt-short{
    width: 270px;
    height: 480px;
  }
}

スマホから見た場合でも縦横比が固定されるように、600px 未満のデバイスでは calc() を使って iframe の比率を 16:9（ショート動画では 9:16）になるように設定し、600px よりも画面が大きい場合はサイズを固定している。

あとがき

YouTube 動画のリンクから埋め込みプレーヤーを生成する JavaScript のコードを書いた。

YouTube の様々なパターンの URL に正規表現を対応させなければならなかったのが間違いなくいちばん骨が折れた。そんでようやく書けたと思ったら、ショート動画も iframe で埋め込めるのを知ったときの絶望感よ……。正規表現を得意になれる日がまじで来る気がしないんだけども。

と、まあ紆余曲折ありつつもプレーヤーを表示できて満足はしている。YouTube の URL から動画 ID を抽出できるようになったので、他にもいろいろできることがありそうだ。

編集
新しい投稿 前の投稿
ホーム