JSFiddle - React, Tailwind, and code Playground
/*
http://stackoverflow.com/questions/23171785/adding-an-object-to-my-javascript
*/
HTML
<input type="text" class='search_input' />
<br/>
<div id="content" class="panel panel-default"></div>
CSS
body {
background-color:gray;
color:#000;
font-family:'Georgia', Times New Roman, Times, serif
}
.search_input {
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#input_box {
text-align:left;
width:640px;
}
#no {
padding:30px;
font-size:24px;
color:#fff;
}
#title {
background-color:#fff;
font-size:26px;
text-align:left;
padding-bottom:8px;
}
#count {
background-color:#fff;
text-align:left;
padding-top:8px;
}
JavaScript
$(document).ready(function () {
$(".search_input").focus();
$(".search_input").keyup(function () {
$("#content1").html("<div id='no' align='center'>No Video</div>");
var search_input = $(this).val();
$.getJSON("https://api.twitch.tv/kraken/search/streams?q=" + search_input + "&limit=1&type=suggest&callback=?", function (data) {
var temp = "";
$.each(data.streams, function (index, item) {
// `img`
var img = "<img src='" + item.preview.medium + "'/>";
// `object`
var obj = "<object style=opacity:1; type=application/x-shockwave-flash" + " height=378 width=620 id=live_embed_player_flash bgcolor=#000000" + " data=http://www.twitch.tv/widgets/live_embed_player.swf?channel=" + item.channel.name + ">" + "<!--Channel name in the example is flosd--><!--Thsese are the parameters-->" + "<param name=allowFullScreen value=true /><param name=allowScriptAccess value=always />" + "<param name=allowNetworking value=all />" + "<param name=movie value=http://www.twitch.tv/widgets/live_embed_player.swf />" + "<param name=flashvars value=hostname=www.twitch.tv&channel=" + item.channel.name + "&auto_play=true&start_volume=25 />" + "<!--End of object--></object>";
temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'>" + obj + "</div></div>";
});
$("#content").html(temp);
});
});
});