YouTubeの再生リストをMyASP会員サイトにこんな感じで埋込めました。
YouTubeの再生リストって何気に便利じゃないですか？
今ってYouTube上にたくさんのチュートリアル動画があるから、項目毎に再生リスト作って登録しておくと結構便利だったりします。
その再生リストってMyASPの会員サイトやWordpressのサイトとかに埋込むことができるんですよね～。
こんな感じで
ただ、ぱっと見は通常の動画埋め込みと変わらず再生リストって分らないですよね。
実は動画右上にリスト表示ボタンがあってそれをクリックすると動画のリストが表示されます。
自分だけが再生リストとかであれば、問題ありません。
ただ、メンバー向けに参考動画的にメンバーサイト内で共有する場合はイマイチですよね。
これもっと便利＆見やすくサイトに埋込む方法ないかな～と考えてみました。
要件としては
・再生リスト内の動画のサムネイルが表示
・再生リストに動画を追加したら自動で反映
・その動画をクリックすると動画が再生
・動画の再生は埋め込み動画と同様にそのサイト内でする
この4つが実現できたら便利だろうな～と、あれやこれや試していたらさ・・・
最終的にこんな感じで実装できました！
再生リストの動画のサムネイルデータとタイトルデータを引っ張ってくる。
サムネイル画像の下に動画タイトルを表示。
PCの場合は3カラムで3つ横並びで、スマホでは1カラムで立て並び
サムネイルか動画タイトルをクリックすると、YouTubeサイトに飛ばず、以下の画像の様にサイト内で再生されます。
で、サンプルの画像はMyASPの会員サイトを使っていますが、Wordpressサイトにも埋込むことができます。
これめちゃくちゃ良くないですか！
現状、さらなる進化を目指し、Vimeoで同様のことが出来ないかな～とAPI使ってあれこれやっていますが・・・・
Vimeoでは上手く出来ない?
あれこれ試していますが、Vimeo対応はまだまだ時間がかかりそうです。
まあ、気長に作っていこうと思います。
メインのnoteはこちら
コンテンツ販売はコチラ
この記事が気に入ったらサポートをしてみませんか？