Youtubeのリンクを貼ってみたかったのでshortcodeをを実装する。

shortcodeとは

htmlタグのテンプレートのようなものという認識。
例えば記事内に画像を貼り付けるとき、一々htmlで細かく記述してられないので使う。
themeによっては用意されているものもあり、Robustだと画像の貼り付けは以下のように記述できる。

{{% img src= “images/icon.jpg” w=“auto” h=“200” %}}

（shortcodeのシンタックスハイライトがどうにもできない）
形としては
{{% shortcode名 引数… %}}
って感じ。 上の画像貼り付け用のshortcodeをエスケープしないで記入するとicon.jpgの画像が出てくる。


実際にhtnlで記述しようとすると以下のようになる。

<figure>
  <img src="http://localhost:1313/images/icon.jpg" alt="" width="auto" height="200">
</figure>

毎回ベタ書きしてると大変なのでよく使うものは作っておくと便利って機能。
shortcodeファイルはlayouts/shortcodesの中にshortcode名.htmlという形で保存する。

shortcodeで何をしたいか

今回はYoutubeの埋め込みを簡単にしたい。
そのため動画のidのみで動画が埋め込めるようなshortcodeを作成する。
埋め込んだ動画ウィンドウのサイズはレスポンシブっぽくしたい。

shortcodeの実装

htmlでYoutubeの埋め込みを作る。
実際にYoutube画面にある共有->埋め込みを押したときに出るコードをコピーして利用する。

共有ボタン
共有ボタン
埋め込み
埋め込み

コピーしてきたものからsrcの内容を少し変える。
動画のIDが入る部分を変数の形として置き換えることでIDのみを変更する形で利用できるようにするイメージ。

使用するときのshortcodeイメージは以下。

{{% youtube id=“動画のID” %}}

実際にYoutubeの埋め込みからコピーしたhtmlは以下。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rjTniCA74PQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

これをdivで囲んでsrcを一部書き換えたのが以下。
class名はmovie-wrapとした。

<div class="movie-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ .Get "id" }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

cssに追記

レスポンシブな動きをさせるためにcssにmovie-wrapに関する挙動を追記しておく。
cssはテーマ内にあるlayouts/partials/styles.cssをベースとして、自分のlayouts/partials/にコピーして持ってきておく。
追記する内容は以下の通り。

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}

.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

実際に使うとこんな感じ

記事への入力はこれ
{{% youtube id=“rjTniCA74PQ” %}}

以下はエスケープ除いた実際の表示

参考にしたサイト