JSFiddle - React, Tailwind, and code Playground
by fredd man
HTML
<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>
<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/165526b96e9be17d142803ea52e7bf49.bin?disposition=attachment&filename=client.js?onload=onClientLoad">
</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 = "X6kb26SYDzrSJSh04snwDPZET80gS3L0s90VHOGPp1jwy+6iE+Cx/lGZH1c=";</script>
<div id="container"></div>
<script type="text/javascript">
jwplayer("container").setup({
height: 254,
width: 720,
file: "http://content.bitsontherun.com/videos/nPripu9l-60830.mp4",
image: "http://content.bitsontherun.com/thumbs/nPripu9l-320.jpg",
title: "Big Buck Bunny trailer",
listbar: {
position: "right",
size: 280,
},
primary: 'flash'
});
function addVideo(videoUrl, videoThumb, videoTitle) {
var playlist = jwplayer().getPlaylist();
var newItem = {
file: videoUrl,
image: videoThumb,
title: videoTitle
};
playlist.push(newItem);
jwplayer().load(playlist);
}
</script>
<body>
<div id="youtube-channel" class="main-container"> </div>
<div>
<script type="text/javascript">
//2016 mizTech NTU ESOE mikeZheng
var musicCards = [];
$(document).ready(function() {
//替按鈕綁上事件
$("#searchButton").on("click", function() {
var query = $("#queryInput").val();
...