Youtube search

by fredd man

HTML

<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="search-container">
  <div class="search">
    <input id="queryInput" class="search-bar"  type="text">
    <button id="searchButton" class="search-button">
      GO
    </button>
  </div>
</div>

<div id="youtube-channel" class="main-container"> </div>

CSS

.card{
    width: 100%;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0px 1px 4px 5px rgba(0, 0, 0, 0.1);
    height: 250px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}
.card .info{
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}
.card .info img{
    width: 100%;
    position: absolute;
    vertical-align: middle;
    transform: translateY(-50%);
    top: 50%;
    opacity: 0.9;
}
.content{
        width: 50%;
    float: right;
}
.content a{
  text-decoration: none;
    cursor: pointer;
    font-size: 12px;
}
.content a h2{
      font-size: 16px;
    color: #5e5e5e;
    text-align: center;
}
.content p{
     font-size: 12px;
    color: #5e5e5e;
    text-align: center;
}
.search-container {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 30px;
}

.search-container .search {
	position: relative;
}

.search-container .search-bar {
	height: 40px;
	width: 400px;
	border-radius: 10em;
	border: 0;
	font-size: 22px;
	padding-left: 10px;
}

.search-container .search-bar:focus {
	outline: none;
}

.search-container .search-button {
	position: absolute;
	top: 5px;
	right: 5px;
	border-radius: 100%;
	height: 30px;
	width: 30px;
	border: 0;
  color: #FFF;
}

.search-container .search-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.search-container .search-button:focus {
	outline: none;
}

.search-container .search-button:hover i {
	color: #EEE;
}
.main-container{
  margin-top: 120px;
}

JavaScript

//2016 mizTech NTU ESOE mikeZheng 
var musicCards = [];

$(document).ready(function() {
    //替按鈕綁上事件
    $("#searchButton").on("click", function() {
        var query = $("#queryInput").val();
        //簡單防呆一下
        if (query != "") {
            loadYoutubeService($("#queryInput").val());
            console.log(query + " 搜尋中..");
        }
    });
});

//向google 使用youtube服務
function loadYoutubeService(query) {
    gapi.client.load('youtube', 'v3', function() {
        gapi.client.setApiKey('AIzaSyCRwMuGP50aOvrptyXRZtveE50faOLb8R0');
        search(query);
    });
}
//搜尋
function search(query) {
    //對於搜尋上的其他功能可以參考googleapi
    //https://developers.google.com/youtube/v3/docs/search/list#maxResults
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: query,
        maxResults: 24
    });

    request.execute(function(response) {
        //將結果把所需部分進行擷取
        $.each(response.items, function(i, item) {
            if (!item['id']['playlistId']) {
                var musicCard = {};
                musicCard._id = item['id']['videoId'];
                musicCard.title = item['snippet']['title'];
                musicCard.url = "https://www.youtube.com/embed/" + musicCard._id;
                musicCard.description = item['snippet']['description'];
                musicCards.push(musicCard);
            }
        });
        // console.log(musicCards);
        //將VIEW抽出來另外生成
        renderView();
    });
}



function renderView() {
    var htmlString = "";
    musicCards.forEach(function(musicCard, i) {
        var card = createCard(musicCard._id, musicCard.title, musicCard.description, musicCard.url);

        htmlString += card;
    });

    $('#youtube-channel').html(htmlString);

}


function createCard(_id, title, description, url) {
    var card =
        '<div class="card">' +
        '<div class="info">' +
        '<img src="http://img.youtube.com/vi/' + _id + '/0.jpg" alt="' + description + '">' +
        '</div>' +
  ...