ゆたろです。どうもです。
そろそろ、花粉対策をしなかればと思っている今日この頃です。
さて、皆さんは案件などでサイト上にyoutubeの動画を配置したことはありますか？ web制作をしていると、そういった要望はよく出てくると思います。ただ、youtubeの動画を載せるだけなら簡単なのですが、そこへ更にオリジナルデザインのプレイヤーを要求されると、一気に工数が跳ね上がります。
今回は、そんな要望が出た時に、それほど工数が上がらないよう簡単にyoutubeのカスタムプレイヤーを実装できるplugin Plyrを紹介します。
▼目次
まずはダウンロード
兎にも角にもとりあえずダウンロードしましょう！
次のサイトからファイルをダウンロードしてください。
Plyrを使ってみよう
ダウンロードしたjsとcssを、それぞれ読み込ませましょう！
--省略--
<html>
<head>
<title>plyr demo</title>
<link rel="stylesheet" href="plyr.css">
</head>
<body>
--省略--
<script src="plyr.js"></script>
</body>
</html>
--省略--読み込ませたら、次の形式でタグを挿入します。
<div data-type="youtube" data-video-id="【使いたいyoutubeのビデオIDを入れてください】"></div>youtubeのビデオIDは、使用したいyoutube動画を特定するために使います。
次のURL末尾についている、「○○○○○○○」の部分です。
次に、jsからplyrを実行させれば、プレイヤーが使えます！
plyr.setup();実行する時にオプションを設定することで、より自分の好みのプレイヤーに近づけることができます。
https://github.com/selz/plyr#options
オプションのほかにも、メソッドやイベントがたくさん用意されています。
https://github.com/selz/plyr#api
https://github.com/selz/plyr#events
そのままだとpluginのデフォルトのデザインがあたります。
それでも十分おしゃれですが、デザインを変更したい方はお好みでcssをいじって調整してください。lessやscssのbuild環境がある方は、変数をいじることで、より簡単にデザインを変更することができます。
サンプル
Plyrを使って、カスタムプレイヤーを表示するサンプルを作ってみました。
--省略--
<link rel="stylesheet" href="plyr.css">
--省略--
<h1>DEMO</h1>
<div class="stage">
<div data-type="youtube" data-video-id="YHQNgmyXg9U"></div>
</div>
<script src="plyr.js"></script>
<script src="hoge.js"></script>
--省略--plyr.setup();まとめ
plyrを使えば、いちからカスタムプレイヤーを実装するよりはるかに簡単に実装できたかと思います。
ダウンロードするときに気が付いた方もいると思いますが、このpluginはyoutube以外にもvideoタグ、audioタグ、vimeoにも対応しています。
サイト上に動画や音声を載せるときによく使うであろうものに対応されているので、案件でも使える機会が多いかと思います！
機会があればぜひ使ってみてください！ それではまた！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
