JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

) {
  	var url = 'https://www.googleapis.com/youtube/v3/search';
    var params ={
    		part: 'snippet',
         key: 'AIzaSyDq4neVjjSiKlKizs2fl9hU-dDM3yB28iU',
        q: string
        
       
    }

  
        //將結果把所需部分進行擷取
  
        // 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>';
    return card;
}
	
</script>
<li>document.querySelectorAll('video').forEach(v => v.playbackRate=1.1)</li>	
</div>
</body>










		</div>
		
		</div>
    </div>
    </body>


<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">

<!--add 4-->
<body>

<style type="text/css">
body {
	font-family:...