Youtube search

by fredd man

HTML

<form id="search-term">
    <input id="queryInput"   type="text">
    <button id="searchButton" class="search-button" type="text">
      Go
    </button>
</form>


  
  <script type="text/javascript"
	src="https://embed-ssl.wistia.com/deliveries/47ecb65faa3c670042b5e4b4b1c79054.bin?disposition=attachment&filename=jquery-2.2.4.min.js">
</script>
   <script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&filename=jwplayer6.10.js"></script>
        <script type="text/javascript">jwplayer.key = "Q1Ft5yFT0nJBlCFnQAvJ7nC+uwr628IgJBzoCAnnn3tGVqUiRjtloYRetCh+EbI0";</script>

<div id="emergencycouplesatu"></div>

<script type="text/javascript">
    jwplayer("emergencycouplesatu").setup({
   playlist: [
<!--0001-->
       {sources: [
{file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4"},
    
        { file: "" }],
image: "",
        title: "Workout Mix 2020 #58",
        
tracks: [{file: "",label: "spanish",kind: "captions","default": true},{file: "",label: "English",kind:                 "captions",}]},	      
    
    
    
    <!--0001-->
       {sources: [
{file: "https://www.youtube.com/watch?v=rzCzRo4C8IY"},
    
        { file: "" }],
image: "",
        title: "Workout Mix 2020 #58",
        
tracks: [{file: "",label: "spanish",kind: "captions","default": true},{file: "",label: "English",kind:                 "captions",}]}	     
 ],
 
autostart: false,
controls: true,
play: false,
  mute: false,
  stretching : "exactfit",
    events:{
        onBufferChange: function(callback) {
              //  console.log(callback.buffer);
               // console.log(jwplayer("emergencycouplesatu").getBuffer());
            }
        },
    width: 500,
	height: 250,
    listbar: {
      position: "right",
      size: 200,
    }
  });
    
   
    function addVideo(videoUrl, videoThumb, videoTitle) {
        var playlist = jwplayer().getPlaylist();
        var newItem = {
   ...

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(event) {
    event.preventDefault();
        var searchTerm = $("#queryInput").val();
        //簡單防呆一下
        getRequest(searchTerm);
        
    });
});


function getRequest(searchTerm) {
  	var url = 'https://www.googleapis.com/youtube/v3/search';
    var params ={
    		part: 'snippet',
         key: 'AIzaSyAh_b4SGi1qTD0eZMovW4O8SXHk7hAhFLM',
        q: searchTerm
        
       
    }

  
        //將結果把所需部分進行擷取
  
        // console.log(musicCards);
        //將VIEW抽出來另外生成
            
   
     $.getJSON(url, params, showResults);
}



function showResults(results) {
	
    var htmlString = "";
   var response = results.items;
   
     $.each(response, 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/watch?v=" + musicCard._id;
                musicCard.description = item['snippet']['description'];
                musicCards.push(musicCard);
            }
        }); 
   
   
    musicCards.forEach(function(musicCard, i) {
        var card = createCard(musicCard._id, musicCard.title, musicCard.description, musicCard.url);

        htmlString += card;
    });

    $('#search-results').html(htmlString);

}




function createCard(_id, title, description, url, addVideo, playlist) {
    var card =
        '<div class="card">' +
        '<div class="info">' +
        '<img src="http://img.youtube.com/vi/' + _id + '/0.jpg" alt="' + description + '">' +
        '</div>' +
        '<div class="content">' +
        '<a id="playlist" onclick=addVideo("'+url+'")>https://www.youtube.com/watch?v=' + _id +'<h2>' + title + '</h2></a>'+
 	'<p>' + description + '</p>' +
        '</div>' +
        '</div>';
   ...