Top Page › Template › カスタマイズ › YouTube動画を自動的にレスポンシブ化する

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

2020-12-26 (Sat) 02:02

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

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

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

WordPressと有りますが、当方のテンプレートでもクラス名を変えたら直ぐ使えるので(有難く)記事として掲載させて頂きます。m(__)m


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




1) Youtubeの埋め込み方法
先ず確認がてら、YouTube動画を記事に埋め込む方法(のおさらい)を一応…。
埋め込みしたい動画ページで動画の下にある[共有]をクリック。
YouTube1
共有ウィンドウが表示されたら[埋め込む]をクリック。
YouTube2
埋め込みコードが表示されるので、オプション設定後[コピー]をクリック、コピーしたコードをブログ投稿欄にペースト。
YouTube3



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



3) Youtube動画を自動でレスポンシブ化する
2番にあるように(過去記事を参照) <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動画は↓です。気になりましたら見て下さい。(^-^) とっても可愛いので和みます♪



'20/12/31 記事が分かり難かったので、4番に挙げていたものを3番に統合し編集し直しました。
[Tag] * カスタマイズ * YouTube

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-12-27-17:45  -
[ 返信 ]

aki

Re: - 様へ

こんばんは。こちらへのコメント、有難うございます。

先程拝見致しましたら大丈夫のようですね。
私の知識は習ったものでは無く ほぼNet掲示の寄せ集めなので、もし何か不具合が有りましたら教えて下さい。

今後とも末永くお付き合い下さいますよう 宜しくお願い致します。m(__)m
2020-12-27-19:39  aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-12-30-21:32  -
[ 返信 ]

aki

Re: - 様へ

こんばんは。追加したJS拝見致しました。
そちらでコメント致しますね。(^-^)
2020-12-30-22:36  aki
[ 返信 * 編集 ]

これは助かります!!

akiさんのテンプレートでは<div class="player">を使うと、YouTubeプレイヤーがレスポンシブになるという事を、最近知った者ですww

今まで貼り付けてきたプレイヤー全部に対応させるのめんど・・・・・大変だなあと思ってやっていなかったのでこれは非常に助かります!!
記事の通りにscriptを設置して問題なく実装できました!!

これからも自分でタグでくくる必要がないのはめちゃくちゃ楽でいいですね!!ありがとうございました!
2020-12-31-09:46  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

こんにちは。コメント有難うございます。(^-^)

先程少し記事内容を「分かり易いように」編集し直しました。
3番に書いてあったものは4番への過渡的なJSで不要かなと思いましたので、4番のものに統一しました。

当方JS不勉強なため、掲載後も不安で自信が有りません。
もし、ご利用頂いて不具合等が有りましたらお教え下さいませ。m(__)m
2020-12-31-16:48  aki
[ 返信 * 編集 ]






非公開コメント