jQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる

Simplictyの公式フォーラムで、Youtubeのレスポンシブ対応についての質問があり、この前の投稿で、ちょっと説明したんだけれども、簡単に経緯を書くと、Wordpressの動画レスポンシブ対応埋め込みプラグインを紹介したら、紹介した数日後にアップデートがありそれがあまりにも糞アップデートだったので、同じようなのを自分で作ってみたと言う流れです。

LinuxMint 17.2で埋め込まれたYoutube playerが再生できない場合の対処
例えば、Youtube公式では通常に再生できて、埋め込みplayerも再生できたりするのに一部の埋め込みplayerは再生できないことがあっ...

タイトルや内容はlinux向けの話ですが、事の経緯は書いてあります。まぁ説明した通りなんですけどね(笑)

で、まだ作成中ではあるんですがおおまかにできたのでその説明をしてみようかと思います。
もちろんレスポンシブなので、下のcodepenの内容で動作確認ができたら、下の埋め込んであるcodepenの本体にて、レスポンシブを見て頂ければ「あぁそういうことね」と言うのが理解してもらえると思います。

See the Pen Youtube address convert to embed iframe by Hidekichi (@Hidekichi) on CodePen.

どういうものか

このように、Youtubeのアドレスを入れておくと、自動でiframeを埋め込むと言うものなのですが、現状では、某プラグインと同様に、iframeの準備はさせておきますが、読み込むのはサムネイルをクリックされてからと言う感じになっています。

css側で、size-s(200 x 113px)とsize-m(400 x 225px)を用意してありますので、

と入力すればサイズを選択できます。これらは、画面幅680px(42.5em)で100%表示になります。
right,left,centerをclassに追加すると、右寄せ・左寄せ・中央寄せができます。ただし、これはfloatさせていないのでfloatさせる場合は、f-right,f-leftを利用してください。

right、left、centerは、必ずsize-(s|m)が必要になります。widthが無い要素は寄せられません。記入例としては、

こんな感じです。f-right、f-leftについてはfloatさせているのでサイズは必要ありませんが、サイズを入れないと寄せてるかどうかが不明かと思います。

動作原理

classにtestとある要素を読み込んで、そこのテキストを拾っています。

ここは基本的にYoutubeのアドレスとなりますから、//youtube.com/watch?v=MOVIE IDと言う形式になっているはずです。
次に、動画IDを拾います。v=の後が必ず動画IDですから.split(“v=”)[1]が動画IDになります。つまり、

アドレス.split(“v=”)[0] = //youtube.com/watch?
アドレス.split(“v=”)[1] = MOVIE ID

こういうことです。ただし、動画IDの後に MOVIE ID&list=XXXXXXXなどが入っている場合がありますので、その際は「&」で再度splitして、.split[0]の値を取ります。そしたら確実に動画IDなので。&が入っているかどうかは「テキスト.indexOf(“&”)」で調べられます。

動画IDが拾えたら、後は簡単です。サムネイルにしても、iframeの埋め込みアドレスにしても動画IDを入れてあるだけなので。

こんな感じで拾っています。このiframeにいくつかギミックが仕込んでありまして、まず一意の要素にするためにidに動画IDユニークIDが入れてあります。どのサムネイルをclickされたかを調べるためでもあります。次に、本来必要なsrcを入れず、data-srcに入れてあります。つまり、この段階ではiframeのタグは入ることになりますが、中身を読み込みません。

これら、動画IDユニークIDと、iframe要素、サムネイルをそれぞれ配列にして格納しておきます。

jQueryで、各class=”test”を読み込んだ際に、そのテキスト(動画アドレス)を調べて、自作関数、makeData()に、送ります。そうすると、先ほどの配列のデータを返してくれます。class=”test”がついてあるものをすべて読み込むため、jQueryでは、

で読み込みます。.testを読み込んだら、そのアドレスをmakeData()に送り作られたデータを配列で返すと言う処理をしますが、まだ.testにはアドレスが書いてある状態なので、$(this).empty();でテキストを消します。このthisは、$(“.test”)です。$(“.test”)をカラにする(empty)と言う意味合いです。

レスポンシブに対応するために、iframeをいくつかのブロックで囲みます。構造としては、

こういう構造になります。あれ?サムネイルは?と言う感じですが、実は、サムネイルはwrapperの背景画像になっています。
iframeの部分は、それ自体をdisplay: none;してあり、かつ、中身は先ほど書いたように、srcではなくdata-srcで持たせているので読み込んでいません。その場所にiframeタグがあるだけです。つまりは、表示された段階ではサムネイルの画像が表示されるだけと言う感じです。

背景画像(wrapper)の前面にiframe(非表示)とbuttonが設置してあり、buttonにはdata-targetが入れてあります。これは動画IDユニークなID(動画IDだと同じ動画を貼った時にユニークにならないので別途関数を用意しました※)です。
※たいていは、同じページ内に同じ動画をいくつも貼ることはないので必要ないんですけども、サンプルでは貼ってあるので念の為に新たに入れました。

このようにして準備をしておき、次いでbuttonをクリックした時の動作になります。

buttonもiframe同様、どのボタンをクリックしたかがわからないので、対になるiframeにはidで、buttonにはdata-targetに動画IDユニークIDを入れてあります。ここから、

このようにしてあります。

2017/04/04 上記サンプルコードを修正しました。当時なんでeachを入れていたんだろう?

data-target=”動画IDユニークID”なので、iframeを探すのは、$(“#動画IDユニークID”)だったら良いことになります。iframe自体を探すのではなくて、id=”動画IDユニークID”の要素を探すわけです。そのため、iframeには、id=”動画IDユニークID”が仕込んであるわけです。
目的のiframeが見つかったので、そのiframeをどのように処理するか、つまり中身の動画playerをどのようにして読み込むかなんですが、これはとても簡単です。

iframeには、data-src=”埋め込みアドレス”と言う形で、そのデータを持たせてあるので、jQueryで、

このようにして、中身を読み込むためにdata-srcの中身をsrcとして定義します。iframeは元々非表示だったので、非表示を受け持っていた.mv_hiddenクラスを取り除き、あわせてposition: absolute;で縦横100%のサイズの設定がしてある.innerを目的のiframeに入れると、.testのサイズに動画playerが読み込まれます。

このようにして、動画アドレスから埋め込みiframeに切り替えています。これらのアイデアの多くはwordperssプラグイン「Advanced Responsive Video Embedder」から流用していますが、基本的な考え方は結構海外のサイトにたくさん出てきます。特に、cssの部分で言う所の、

このあたり。これ何してんだ?と思う部分でもあるのですが、wrapperのwidth:100%でbackground-size: cover;はいわゆるレスポンシブ対応のためなんですけれども、.containerのheight:0で、padding: 0 0 56.25%ってなんだよって話ですよね。

56.25%については、100% : 16 = x : 9と言う感じです。つまり、16:9のアスペクト比にするために、16x = 900%, x = 56.25%、そういう計算です。高さは0ですが、paddingのボトムを100% : 56.25%(つまりは16:9として)確保して、wrapperの高さを算出しようって事なんでしょうね。

特別ややこしいことをしているわけではないにせよ、なるほど、そうするのかと言うアイデアがそこにあったりします。これらもiframeと言うか、youtubeの埋め込み動画をレスポンシブ対応させる時には定番となりつつある方法ですね。

文字でザックリとどのようにして動作しているのかを書きましたが、実際に見てもらった方が良いということで、今回はいつものfiddleではなく、codepenを使ってみました。何かしらの役に立てば幸いです。

ちなみにまだ開発中なので、もっと何か良い方法を思いついたら変更するかも知れません。それに伴い、この記事の内容が変わる場合もありますが、予めご了承お願いします。

スポンサーリンク

シェアする

フォローする