YouTube動画を自動でレスポンシブ化するJS

カスタマイズ HTML, CSS, JavaScript

2023/05/06

2023/05/20 0

vanillaice (Akira)

トラブル対処 Instruction

なんかすごい技のようなタイトルですが、単純に弊テンプレートのレスポンシブYouTube用HTMLを生成するというだけの話です。

追記 2023.5.20
全文表示タイプテンプレートへの言及を失念しましたので章を追加しました。

弊ブログ提供テンプレートでは『はみ出し』は起こりませんが、定形HTMLを書かなければ『縦伸び』の状態になります。公式テンプレートの場合(レスポンシブ, スマートフォン専用版)は『はみ出し』になるものが多いですね。

はじめに

弊ブログで提供している無料テンプレートには、YouTube動画の縦横比を固定させるためのCSSをデフォルトで入れていますが、それを利用するには記事作成時に定形HTMLを記載しなければいけないというめんどくささがあります。

定形HTML

<div class="box-for-video">ここに動画埋め込みiframe要素</div>

YouTubeの埋め込みコードをペタっと貼るだけで上記のような定形HTMLを自動生成して楽しようというのが本記事の主旨です。

ただ、JSは便利ではありますけれども、なんでもかんでもJSで自動というのもパフォーマンスを考えればあまり良くはない。なので自分で書ける環境を既に構築しているという方はなるべくHTML手打ちでやった方が良いと思います。環境構築とは、例えばコピー&ペーストを手助けするツールに登録しているとか辞書登録して活用しているなど。

目次へ戻る↑

CSS

弊テンプレートをご利用の方はこの章の内容は不要です。

レスポンシブ化するための専用クラス .box-for-video のスタイル定義が行われていることが前提です。弊テンプレートでは対応済みです。含まれていない場合・弊テンプレートではない場合は以下の内容をスタイルシートに記載した上で利用してください。馴染みのテンプレート製作者が居る場合は今後も同じ製作者さんのテンプレートを利用する可能性が高いと思いますので、そのテンプレートの中に同じ機能を持つクラスが無いかどうか確認し、そのクラス名を利用されると良いと思います。

* 他者制作テンプレートのソース解析は行いませんので、ご質問はお控えください。

CSSを見る

/* YouTubeレスポンシブ */
.box-for-video {
  position: relative;
  width: 100%;
  max-width: 600px;/* 最大横幅(不要ならこの行削除) */
  margin: 30px auto;/* 上下要素との距離 + 中央寄せ (不要ならこの行削除) */
}

.box-for-video:before {
  content:"";
  display: block;
  padding-top: 56.25%;
  overflow: hidden;
}

.box-for-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

目次へ戻る↑

HTML

念の為サンプルコードを掲載します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>

上記が2023年5月現在のYouTubeの埋め込みコードです。自身が取得した内容が上と大きく異なる場合は違うものを取得したのかもしれません(ページURLではなく『共有』>『埋め込む』から取得します)

埋め込みコードはYouTubeから直接取得してください(FC2ブログエディターツールの利用は避けます)

また、埋め込みコードに loading="lazy" を追加して遅延ロードを行うと良いでしょう。また、コード中の frameborder="0" もHTML5以降のテンプレートであれば削除しておくと良いですね(frameborderは廃止属性です)

目次へ戻る↑

JavaScript

テンプレートHTMLの </body> の直前に記載。

記事以外の場所(サイドメニュー等)にYouTubeの掲載が『無い』と仮定した内容です。
個人の使い方によって若干内容を変える必要があります(後述)

ソースコードを見る

<!--permanent_area-->
<script>
window.addEventListener('load', function() {
  const tarTube = document.querySelectorAll(':not(.box-for-video) > iframe[src*="youtube.com"]');
  tarTube.forEach(function(iframe) {
    const TubeOuter = document.createElement('div');
    TubeOuter.classList.add('box-for-video');
    iframe.parentNode.insertBefore(TubeOuter, iframe);
    TubeOuter.appendChild(iframe);
  });
});
</script>
<!--/permanent_area-->

以下の条件に当てはまる方は適切な変更を加えてください。複数に該当することもあります。

全文表示タイプテンプレートを利用している

全文タイプを使用し、かつ、YouTubeを『追記』ではなく『本文』に掲載している場合。つまりトップページ種にYouTubeが掲載される場合は1行目と13行目を削除します。本当はこれだとちょっと無駄があるんですが、他者制作テンプレートなどでも同じように導入できるようこの形としておきます。FC2ブログ独自変数に詳しい方は適用ページの分岐を行ってください。

レスポンシブYouTubeを一度も利用したことが無い

*この作業は任意です。デフォルトのソースコードをそのまま利用してもOKです。

4行目 :not(.box-for-video) > iframe[src*="youtube.com"] を iframe[src*="youtube.com"] に変更。

既存記事で .box-for-video のラッパーを利用している方はデフォルトの内容のまま使ってください。既にラッパーのあるYouTubeに対しての処理を除外しています。

記事以外にもYouTubeを掲載している

記事及びそれ以外の部位全てのYouTubeに適用する場合

1行目の  と、13行目の  を削除。

記事内のYouTubeにのみ適用する場合

4行目 :not(.box-for-video) > iframe[src*="youtube.com"] を .inner-contents :not(.box-for-video) > iframe[src*="youtube.com"] に変更ですが注意あり。

緑部位 .inner-contents は記事内容を包括する要素に与えられているクラス名で、弊ブログ提供テンプレートのほとんどがこのクラスですが、中には異なるクラスのものもあります。正しいセレクタに書き換えてください。

例1) 記事部分のHTML / #inner-contents

<div id="inner-contents">
  <%topentry_body>
  <!--more-->
  <div class="postscript">
    <%topentry_more>
  </div>
  <!--/more-->
</div>

例2) 記事部分のHTML / .main-cont

<div class="main-cont">
  <%topentry_body>
  <!--more-->
  <div class="postscript">
    <%topentry_more>
  </div>
  <!--/more-->
</div>

目次へ戻る↑

まとめ

今回の方法を取る場合のデメリット(cons)は以下のようなものです。

若干パフォーマンスを低下させる可能性がある
横幅制限などを個別に設定できない

個人的には横幅調整やmargin調整をその都度行えないというのが大きなデメリットではないかと思います。予めCSSの方に max-width: 数値px という形で制限を設けておくことはできますが、記事幅いっぱいに動画を表示させたいときもあれば、小さめに表示したいときもありますよね。

以下はJSによるレスポンシブを利用したYouTube掲載です。スマートフォンデバイスで確認するか、ブラウザを縮小してご確認ください。横幅調整ためラッパーを作成しています。でもそれやるなら本末転倒というか、全部フツーにHTML書いた方が良いのかも。元々が『楽したい』という意義で使うわけなので(笑)

とはいえ、必要が生じたときに以下の方法を使っても良いと思います。サンプルとして実際のコードを掲載しておきますね。『時折調整するかも』という可能性がある方は、CSSのmax-width指定は行わず以下の方法で。marginもその都度調整する可能性があれば、こちらもCSSから指定を削除しておきましょう(margin指定はYouTube側へしなくとも、その前後要素への指定で調整ができます)

<div style="max-width: 600px; margin: 30px auto;"><!-- 横幅制限用ラッパー -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/dHqbuJOd7Y0" title="YouTube video player"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>
</div>

最後にくれぐれも、記事作成時にHTMLを書く作業が苦にならないという方は是非それを継続してください。JSを利用しなければ CLS (レイアウトシフト, Cumulative Layout Shift) も起こりません。

Comments 0

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する