YouTube動画をHugoに貼り付けるためのShortCodeを表示するBookmarklet作った

タイトルの通りです。

HugoにYouTubeの動画を貼り付ける場合、URLをそのまま貼っても埋め込みはしてくれません。

埋め込みのためには、以下のような形のショートコードを使う必要があります。

{{< youtube PNPumbr0IT4 >}}

ただ、毎回動画のIDをコピペしてショートコードを生成するようなことは、怠惰なエンジニアとしてはやりたくない。 ということで、YouTubeの動画ページを開いた状態で動作させるとショートコードを出力するようなブックマークレットを作成しました。

コード

以下のとおりです。

javascript: (function () {
    var id = document.querySelector("#page-manager > ytd-watch-flexy").getAttribute("video-id");
    var title = window.prompt("for hugo", "{{< youtube " + id + " >}}");
})();

YouTubeの動画IDはURLのwatch?v=の後ろにもついているのですが、 動画への導線によってパラメータが増える場合もあります。

たとえば

https://www.youtube.com/watch?v=2S7-A57P1fM&list=PL7nw85QNe2jf7TscMYiG5TNwr3ZYxfkcW

のような形。再生リストの情報などが付与される場合があります。

このような場合に正規表現でテキスト抽出してー、などが面倒だったので、DOM内でvideo-idというそれっぽい値を持っているところから引っ張ってきています。