機能テスト Youtubeのアドレスをdivで囲むだけでプレーヤーを埋め込む

Hidekichi

2023/05/07 2024/12/29

Windowsの更新をしたら、保存するのを忘れてて内容が消えてしまったので内容を書き直しました(2023/07/22)

概要

Youtubeの動画を貼ろうとすると、その動画のページから「共有」メニューを選んで「埋め込む」からiframeなんちゃらと続くコードをコピペしてというのが通常の流れですが、面倒くさいので、共有からそのまま「コピー」でアドレスをコピーして、それを<div class="ytp">ここにアドレス</div>とすれば表示できるならちょっと楽じゃないの？という所から実装しました。
実際の労力はあまり変わりませんが出力が、埋め込まれたプレイヤーか、その動画のサムネイルかでは少し意味合いが異なります。
動画プレーヤーである場合は、プレーヤーを表示後必ず動画の読み込みが始まります。その動画を見ようが見まいがです。これを見る動画だけ読み込めばいいやんと言うのが、主な目的でもあります。

上記でも書いたように、<div class="ytp">...</div>として書くわけですが、これは<div>だけではなくて、<span>でも可能です。
サムネイルが最初に読み込まれて、ボタンを押してからはじめて動画プレーヤーの埋め込み処理が行われるため表示は軽くなります。
注意点としてはAPIを利用しているわけではないので、何かしらの問題があって動画の公開が停止された場合などもそのままの状態で残る事が挙げられます。サムネイルが取得できない場合は真っ暗な画像で再生ボタンが表示されることになります。このあたりはデータが取得できなかった場合に別の方法を取るように今後何かしら手を打とうかと思います。

サンプル

bloggerではhtmlビュー(モード)で、以下のようにして書き込みます。

//1
<div class='ytp'>https://youtu.be/cNH9aJJXjDE</div>
//2
<p><span class='ytp'>https://www.youtube.com/watch?v=cNH9aJJXjDE</span></p>
//3
<p>[@size-m|https://youtu.be/cNH9aJJXjDE]</p>

この1～3はいずれも同じようにアドレスからサムネイルを取得して、その部分にiframeで動画プレーヤーを埋め込みます。実際にやってみたのが以下の通り。

解説

上記サンプルで、1と2はアドレスの形式が違うだけで同じYoutubeのアドレスを利用しています。
また2は、段落Pの中のインラインとして埋め込んでいますが、埋め込むプレイヤーはブロック要素で埋め込まれるため、以下のようになります。

こんな感じに文字が入れられて

その中に動画が埋め込まれます。

3は、［@ CLASS | YOUTUBE_ADDRESS ］という構造の独自のショートコードで、これらは、1、2のアドレスの形式に変換されてから動画のサムネイルを取得します。サムネイル上の再生ボタンが押されるとここでプレイヤーの埋め込みの処理が始まります。

オプションクラスの説明

このYoutubeアドレスの埋め込み機能を実行するためにはクラスでclass="ytp"が必須ですが、それに加えて次のようなオプションのクラスが利用できます。
注意点として、通常の寄せとフロートによる寄せは同時に記載しないようにして下さい。いずれかの利用で。

サイズは次の通りで、横幅に対する縦が16:9となるように表示されます。

size-s	width: 200px
size-m	width: 400px
記載なし	width: 100%

cssに追加されるので順番はどうでも良いですが、クラス同士の間には半角スペースが必要です。
ここに寄せ(align)の指定ができます。

leftあるいは無記入	左寄せ
right	右寄せ
center	中央寄せ

この他にも一応floatの設定もあります。

f-right	サムネイルを右にして文字を回り込ませます。
f-left	サムネイルを左にして文字を回り込ませます。

書き方としては以下のようになります。

<p>[@size-s f-right|https://youtu.be/oBhoT5lNfeQ]ここに何かしらのテキスト</p>

これを書いたらどうなるのかのテスト、これを書いたらどうなるのかのテスト、これを書いたらどうなるのかのテスト、これを書いたらどうなるのかのテスト、これを書いたらどうなるのかのテスト

上記のようになります。floatしているという事は高さを持たないので、ある程度の文章量が必要になること、またそこで改行したい場合は別途、<何かしらの要素 style="clear:both;">などが必要になる場合もあるので使用は十分に注意して下さい。ちなみに上記ではclear等は入れてありません。