YouTube動画を自動的にレスポンシブ化する

過去に『記事掲載時にYouTube等の動画をレスポンシブで埋め込む』というカスタマイズを掲載しているのですが、divタグで括らなくてもレスポンシブにならないかと考えておりました。
先日、そんなご相談のメールを頂いてNet上を彷徨い探しておりましたらとても素晴らしい記事がっ！

下記サイトで、YouTube動画を埋め込んだ時 自動的にレスポンシブで埋め込まれる方法を紹介されています。
↓WordPressと有りますが、当方のテンプレートでもクラス名を変えたら直ぐ使えるので記事として掲載させて頂きます。
（有難うございます。）m(__)m

WordPressにYoutube動画を埋め込んだら自動的にレスポンシブになる方法

みなさん、こんにちは。 MEGIDO(メギド)です。 最近、とある案件で「WordPressの投稿にYouTu…

cheat.co.jp

1. Youtubeの埋め込み方法
2. Youtubeをレスポンシブ表示にする
3. Youtube動画を自動でレスポンシブ化する

1 ）　Youtubeの埋め込み方法

先ず確認がてら、YouTube動画を記事に埋め込む方法（のおさらい）を一応…。
埋め込みしたい動画ページで動画の下にある［共有］をクリック。


共有ウィンドウが表示されたら［埋め込む］をクリック。

埋め込みコードが表示されるので、オプション設定後［コピー］をクリック、コピーしたコードをブログ投稿欄にペースト。

2 ）　Youtubeをレスポンシブ表示にする

ここで過去記事『記事掲載時にYouTube等の動画をレスポンシブで埋め込む』を使ってレスポンシブ表示にする事が出来るのですが、これだとその都度YouTube動画を埋め込む時に <div class="player"></div> で括らなければいけません。
記事投稿時、divタグを使わずにそのままYouTubeの埋め込みコードを貼り付けるだけでレスポンシブになる方法、が下記３番です。（過去記事もおさらいに是非お読み下さいませ。m(__)m）

3 ）　Youtube動画を自動でレスポンシブ化する

２番にあるように（過去記事を参照） <div class="player"> と </div> で括ればレスポンシブになるので、JavaScript（jQuery）を使ってYouTubeのiframeタグを括るようにする、という方法です。
このカスタマイズはjQuery本体が必要です。CDN等で予めHTMLに導入して下さい。（当方テンプレートは導入済みなので不要。）
スタイルシート部分も当方のテンプレートの場合は既に入っています。
他者製テンプレートをご利用でこのカスタマイズをされる方は、下記のクラスをスタイルシート編集枠内最下に追加して下さい。

/* 動画サイズレスポンシブ用（iframeをdiv class="player"で括る） */
.player{
position:relative;
height:0;
padding-bottom:56.25%; /* アスペクト比16:9の場合 */
overflow: hidden;
}
.player iframe{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}

同じ名前のクラス名が有る場合は、CSS・JSの player を別の名前に変更して下さい。

【 使用する基本script↓ 】

<script>
$(function(){
  // div要素を生成
  var div = document.createElement('div');
  // classを追加
  div.className = 'player';
  // 生成したdiv要素を追加する
  $('iframe').wrap(div);
});
</script>

このままのJSでは他の部分のiframeにまでclass="player"を付与してしまい、既に<div class="player">を使って記事掲載済みのYouTube動画が有る場合に重複したタグの無駄な入れ子になってしまいます。
…簡単に言うと、iframeを使っているもの全てに付与され、且つ記述済みのものにも付いてしまい
<div class="player"><div class="player">YouTubeコード</div></div>
…という風になってしまうという事です。
なので、『既に付いているもの以外で記事掲載部分にのみ』という、出来るだけ範囲を狭めたJSに変更します。

<script>
$(function(){
  if(!($('.player').length)){
    $(function(){
      var div = document.createElement('div');
      div.className = 'player';
      $('.con_body iframe[src*="youtube"]').wrap(div);
    });
  }
});
</script>

【 上記のスクリプトを圧縮したもの↓ 】

<script>
$(function(){if(!($(".player").length)){$(function(){var a=document.createElement("div");a.className="player";$('.con_body iframe[src*="youtube"]').wrap(a)})}});
</script>
↑ソースが繋がっているので、途中で切らずにコピペして下さい。

こうすると、「クラス名playerが存在しなかった場合に、.con_bodyのiframeでYouTube動画だけを <div class="player"></div> で包む」というものになります。

上記のスクリプト（若しくは圧縮したもの）をHTML編集枠下段、</body> の上に入れて更新ボタンを押せば完了。

<script>
～～ YouTubeのJS 省略 ～～
</script>
</body> ↑こんな感じに追加
</html>
----- ここが一番最下 -----

これで、記事内にYouTube動画を入れる際に面倒なレスポンシブ化用divタグで括る必要が無くなります。

ただ、当方JavaScript分かりませんので 効率が悪い・間違った書き方かもしれません。
「もっと良い方法が有るよ」と教えて下さる方、もしいらっしゃいましたらご連絡下さいませ。m(__)m



カスタマイズをする際は、テンプレートの複製を作ってから作業すると安心です。
因みに…上記の見本YouTubeは↓です。気になりましたら見て下さい。(^-^) とっても可愛いので和みます♪
🐹🦂Scorpion maze with Traps hamster Police Pets 🐹 in Hamster stories


'20/12/31 記事が分かり難かったので、４番に挙げていたものを３番に統合し編集し直しました。