Michael Luo's Blog
(Project) YouTube API

(Project) YouTube API

Michael Luo's photo
Michael Luo
·

2 min read

學習到的知識點

HTML

CSS

  • .clearfix

    JS

  • $.get
  • $.each
  • fancy box 套件

簡介

利用 Youtube API，可以搜尋 Youtube 影片。

有查看上一頁和下一頁的功能，點擊標題連結可以在該頁撥放影片。

Demp

HTML

結構

  <body>
    <div class="container">
      <header>
        <h1>Search<span> Videos</span></h1>
        <p>Search all Youtube videos</p>
      </header>
      <!--  TODO: 1. Submit 送出後 callbackFunction -->
      <section>
        <form
          id="search-form"
          class="search-form"
          name="search-form"
          onsubmit="return search()"
        >
          <div class="fieldcontainer">
            <input
              type="search"
              id="query"
              class="search-field"
              placeholder="Search Youtube..."
            />
          <input
            type="submit"
            class="search-btn"
            id="search-btn"
            value=""
          ></input>
        </div>
        </form>

        <ul id="results"></ul>
        <div id="buttons"></div>
      </section>

      <footer>
          <p>Copyright &copy; 2021,All Right Reserved</p>
      </footer>
    </div>

    <script src="./app.js"></script>
    <script src="./js/jquery.fancybox.pack.js"></script>
    <script>
        $(document).ready(function () {
          $(".fancybox").fancybox();
        });
      </script>

CSS

完整 CSS code

clearFix

在使用 float 的時候經常會遇到圖片超出預設的寬度，但只要使用 clearfix ，就可以使圖片和容器寬度一樣。

.clearfix {
  clear: both;
}

box-shadow 套件

Beautiful CSS box-shadow examples

JS

利用 jQuery 在 focus 與 blur（離開焦點）的時候執行 animate 來達到拉長與縮短的效果。

search bar 是由一個輸入區塊跟搜尋按鈕兩部分組成，輸入區塊的位置用 width 百分比控制、按鈕則是用position: absolute加上 right 的 px 來控制。 原始狀態，也就是 blur 時輸入區塊是用width:45％、按鈕是用position: absolute、right:360px。 點擊後變為 focus 狀態，輸入區塊則用width:100％、按鈕是用right:10px。

  • focus 時範例 Focus 時範例

  • blur 時範例 Blur 時範例

需要注意搜尋按鈕是用 submit 事件，要用e.preventDefault()來停止預設行為的發生。

:bug: 這邊應該是要讓 icon 跟 輸入 input 綁在一起，讓 icon 也能夠往右移，但這邊不曉得出了什麼錯，一直沒辦法用好，之後再回頭修改來讓動畫效果更精緻

取得 YouTube 資料

利用網址可以取得的json資料。

https://www.googleapis.com/youtube/v3/search

$.get 取得資料

  • part: 這個參數是為了避免大家呼叫 API 時得到太多不相關的資訊，所以用 part 來定義要取得的資料範圍。在 - - Search 的情況下，設定為 part:snippet 。
  • type：限制搜尋結果為 video、channel 或 playlist
  • q：搜尋關鍵字
  • key: 金鑰
function search() {

  // * Clear Result
  $("#result").html("");
  $("#buttons").html("");

  // * Get Form Input value
  q = $("#query").val();

  $.get(
    "https://www.googleapis.com/youtube/v3/search",
    {
      part: "snippet,id",
      q: q,
      type: "video",
      key: "AIzaSyBcMsR-AjSrK-Dxyd2o3F8vcF-JueJma4o",
    },

    // 取得 data 裡的 Token 方便之後使用
    function (data) {
      var nextPageToken = data.nextPageToken;
      var prevPageToken = data.prevPageToken;

      // Log Data
      console.log(data);
    }
  );
}

$.each 讀取每一筆資料

$.each(data.items, function (i, item) {

// * Get Output
var output = getOutput(item);

// * Display Result
$("#results").append(output);
});

var buttons = getButtons(prevPageToken, nextPageToken);

// * Display Buttons
$("#buttons").append(buttons);

getOutput () 列印出搜尋資料

過濾資料，取得需要的部分，建立成 output 字串。

在這邊就可以得到影片與內容的資訊，然後更改 video 的樣式。

fancy box 套件

到fancy box 官網下載檔案，然後放到Project裡。

參考文章