サイトの動画の縦横比を切り替えるスイッチのJavaScriptプログラム

ブログにYouTube動画を載せることがある。通常動画は横長の16:9の縦横比で表示するけれども数年前からショート動画が出て来て、丁度、反対の縦長の9:16で作られているからどうするかを考える。動画のサイトへの埋め込みの縦横比は何でも構わないから通常動画と同じように横長で表示することはできる。しかしながら魅力が半減してしまうことが危惧される。縦長に表示すると問題ないけれども画面全体に大きく広がるので、特にスマホだと他に何もなくなって操作性に難点があるかも知れない。なので縦長で表示したところに横長に切り替えるスイッチを浮かべておいて横長でも表示できるようにした。JavaScriptのプログラムで作成したので、使う人がいれば著作権付きで無料で提供したいと思う。注意：動画を縦長で表示するとGoogleのSearch Consoleの動画ページのインデックス登録に「動画の高さが高すぎます」と警告が出てGoogleの動画検索からアクセスが得られなくなることがある。

サイトの動画の縦横比の切り替えスイッチ
動画の縦横比の切り替えスイッチのソースコード
動画の縦横比の切り替えスイッチのカスタマイズ

サイトの動画の縦横比の切り替えスイッチ

横長で観る

既存の動画からショート動画を作成💫｜YouTube クリエイター

動画に重なっている「横長で観る」、または「縦長で観る」のスイッチを押すと動画の縦横比を切り替えて表示することができる。動画の縦横比の切り替えスイッチのソースコードサイトの動画のHTMLとスイッチのJavaScriptの二つのソースコードで動作する。HTML

<figure>
<iframe class="cari" style="width:100%;height:auto;aspect-ratio:9/16;transition:all .3s" width="266" height="320" src="https://www.youtube.com/embed/E7Fp4L-KbMw"></iframe>
<div class="sari" style="display:flex;justify-content:center;align-items:center;height:42px;position:sticky;bottom:0;background-color:#c0c0c0;color:#000000;cursor:pointer;">横長で観る</div>
</figure>

動画のiframeタグとスイッチのdivタグを一つのfigureに入れて共通の親にする。figureタグは親ボックスとして必要なだけなので、その他のdivタグなどで置き換えても表示に支障はない。JavaScriptとの関連付けのために動画とスイッチのタグのそれぞれにcariとsariのclassを付けている。もう一つのプログラムのソースコードと合わないと動作しない。変えたい場合はHTMLとJavaScriptで一緒に行って揃える必要がある。デザインは動画とスイッチのstyle属性で、付けている。これはstyleタグで他のところに記載しても構わない。良く使うならばstyle属性で個々に追加するよりも一つのstyleタグに纏めた方が便利だ。

関連ページ

iframeの縦横比を一発でレスポンシブに指定できるaspect-ratio

JavaScript：一つの動画用

/* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/10/javascript-program-to-switch-the-aspect-ratio-of-videos-on-the-website.html | License: The MIT License */
const nif = document.querySelector("iframe.cari"), nsw = document.querySelector("div.sari"), dar = getComputedStyle(nif).aspectRatio, dtx = nsw.textContent;
nsw.addEventListener("click", () => {
nif.classList.toggle("chia");
if (nif.classList.contains("chia")) {
nif.style.aspectRatio = "16/9"; nsw.textContent = "縦長で観る"; } else {
nif.style.aspectRatio = dar; nsw.textContent = dtx; }
nif.scrollIntoView(); });

先頭のコメント（/*〜*/）が著作権を示しているので、無料で使用するかぎり、必ず残して置かなくてはならないし、ソースコードを編集するときなども誤って消さないようにして欲しい。僕がBloggerで出しているテンプレートのImaginaryを使っている人はテンプレートに著作権が付いているから個別のプログラムに付けなくても構わない。動画の下か重なって表示されるスイッチを押すと動画の縦横比を切り替えて表示する。JavaScriptプログラムの記載法動画の縦横比の切り替えのソースコードはサイトのHTML編集にscriptタグで囲って動画とスイッチのソースコードの後に記載すれば動作する。

<script>
JavaScriptプログラムのソースコード
</script>

スイッチを付けたい動画がページ内に。二つ以上、ある場合は次のプログラムを使う。JavaScript：二つ以上の動画用

/* Copyright: Nagahito Yuki 2023 | https://www.nagahitoyuki.com/2023/10/javascript-program-to-switch-the-aspect-ratio-of-videos-on-the-website.html | License: The MIT License */
const nifs = document.querySelectorAll("iframe.cari");
nifs.forEach(nif => {
const nsw = nif.parentElement.querySelector("div.sari"), dar = getComputedStyle(nif).aspectRatio, dtx = nsw.textContent;
nsw.addEventListener("click", () => {
nif.classList.toggle("chia");
if (nif.classList.contains("chia")) {
nif.style.aspectRatio = "16/9"; nsw.textContent = "縦長で観る"; } else {
nif.style.aspectRatio = dar; nsw.textContent = dtx; }
nif.scrollIntoView(); }); });

動画とスイッチのHTMLのそれぞれのclassのcariとsariがサイトの他のソースコードでも使われていたら干渉してしまうかも知れないので、変更した方が良い。その場合、HTMLとJavaScriptのソースコードで揃えなくては行けない。JavaScriptではプログラムの最初の方のiframe.cariかdiv.sariが対象になる。それぞれ、前の部分がタグ名で、途中の半角ピリオド（.）がclassを意味して後の部分がクラス名になっている。動画の縦横比の切り替えスイッチのカスタマイズ初期値のデザインと機能は次のようになっている。動画のデザイン／iframeタグのstyle属性

width（横幅）

100%

height（縦幅）

auto

aspect-ratio（縦横比）

9/16

transition（伸縮時の間隔）

all .3s

スイッチのデザイン／divタグのstyle属性

display（表示法）

flex

justify-content（Flexboxの横合わせ）

center

align-items（Flexboxの縦合わせ）

center

height（高さ）

42px

position（位置取り）

sticky

bottom（stickyの下の位置）

background-color（背景色）

rgba(128, 128, 128, .4)

color（文字色）

#000000

cursor（カーソル／タッチ）

pointer

動画とスイッチのデザインはiframeタグとdivタグのそれぞれstyle属性の内容を書き換えるとカスタマイズできる。動画の縦横比を変更する場合初期値は動画のiframeタグのstyle属性のaspect-ratioの値を書き換えるだけでカスタマイズできる。スイッチで切り替えた後の縦横比はJavaScriptのnif.style.aspectRatio = "16/9"の値の「16/9」を書き換える。切り替えた後の縦横比のカスタマイズのnif.style.aspectRatioはプログラムに二つあるうちの一番目の方になる。スイッチのメッセージを変更する場合初期値はスイッチのdivタグの「横長で観る」の部分を書き換えるだけカスタマイズできる。スイッチで切り替えた後のメッセージはJavaScriptのnsw.textContent = "横長で観る"の値の「横長で観る」を書き換える。切り替えた後のメッセージのカスタマイズのnsw.textContentはプログラムに二つあるうちの一番目の方になる。const nif = document.querySelector("iframe.cari"), nsw = document.querySelector("div.sari"), dar = getComputedStyle(nif).aspectRatio, dtx = nsw.textContent; nsw.addEventListener("click", () => { nif.classList.toggle("chia"); if (nif.classList.contains("chia")) { nif.style.aspectRatio = "16/9"; nsw.textContent = "縦長で観る"; } else { nif.style.aspectRatio = dar; nsw.textContent = dtx; } nif.scrollIntoView(); });