JekyllでYouTubeのレスポンシブ対応をする

意外と罠にハマっていました。
前回にプラグインの記述をしていましたが、GitHub環境下でのJekyllはプラグインの使用を許可していないようです。ご注意を。

さて、Jekyllでのサイト生成を行なうようになってからタグの埋め込みもやれるようになりました。やっぱりやりたいと思うのはYouTubeの埋め込み。
普通にタグの挿入でも動画は入りますが、レスポンシブなテーマ (スマホ表示に対応した物) の状態ではレイアウトが悲しい状態になります。
なのでYouTubeの埋め込みをレスポンシブに対応させる事にチャレンジしました。

assetsのmain.scssの編集

レスポンシブに対応させるためにmain.scssを編集します。
以下のコードを貼り付けます。

.video-container {
  position: relative;
  width: 60%;
  padding-top: 40%;
  iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

これでCSSを使う設定が完了しました。次に埋め込みです。

埋め込みを行なうマークダウンファイルにタグを挿入

ページの素となるマークダウンに埋め込みのタグを挿入します。

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/XXXXXXXX" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

https://www.youtube.com/embed/XXXXXXXX は埋め込み用のURLです。
YouTubeの埋め込みのタグからURLを引っ張り出してください。
これでローカル上で確認しつつサイズの調整をやれば良い感じになります。

こんな単純だったのに苦戦した自分は一体…