YouTube + Search = yt-search

yt-searchはYouTubeの検索結果を一覧にして見やすく表示するWeb Componentsです。YouTube Data API v3を利用しており、API keyを用意してファイルをアップロードするだけで使えます。

or...

<link href="//aquei.github.io/yt-search/dist/yt-search.html" rel="import">

<yt-search
  data-query="michael jackson"
  data-play-btn-txt=" 再生"
  data-playing-btn-txt=" 再生中"
  data-max-results="6"
  data-api-key="AIzaSyDUlyqKGQuiRTnj1N5Y_iCJIVJMAgYMZ3U"
  data-params='{"videoCategoryId":10}'
  data-scroll="on"
  data-theme="darkly"
></yt-search>

このようなマークアップで下のように表示されます。

基本的な使用方法

distフォルダをアップロードし、yt-search.htmlをimportしてください。data-query属性に検索キーワードを指定します。また、data-api-keyにapi keyを指定します。api keyはGoogle Developers ConsoleからYouTube Data APIを有効にした、ブラウザアプリケーションキーを取得してください。(リファラを制限するのをお忘れなく)

省略可能な属性は以下のとおりです。

data-play-btn-txt

クリックすると再生されるボタンのテキストです。省略した場合は「再生」になります。

data-playing-btn-txt

再生ボタンがクリックされた後のテキストです。省略した場合は「再生中」になります。

data-max-results

検索結果を何件まで表示するかです。省略した場合は"5"になります。

data-params

パラメータと値が対になったJSON文字列を設定できます。認証が必要なパラメータは不可です。

data-scroll

"on"に設定すると、再生ボタンがクリックされた時にビデオ画面までスクロールします。

data-theme

配色を指定できます。Bootswatchから選択できます。

data-shadow-dom

"off"に設定すると、shadow rootを作りません。

小技

tips 1

ボタンテキストはアイコンフォントとスタイルのfont-familyでアイコンが表示できます。直接文字を指定したり、css contentを利用したり。

tips 2

スクロールはネイティブにサポートされていれば、smooth scrollします(現時点ではfire foxのみ)。もしjQueryとjQuery.scrollToが読み込まれていれば、他のブラウザでもsmooth scrollします。

tips 3

IE9+でも動作すると思いますが、IEやFirefoxはWeb Componentsをサポートしていないので、polyfillが必要です。

yt-search