Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
  
  <meta charset="utf-8">
 
</head>
<title>VidTube</title>
​
<body>
  
  <h1><span style="color:#fb4c64">Vid</span>Tube</h1>
  
  <div class="field" id="searchform">
              <input type="text" id="searchterm" placeholder="Please enter a term to search...  ( for example: &quot;cats&quot; ) " />
              <button type="button" id="search" onclick="search()">Find</button>
      </div>
  
  <div class="container">
    <div class="video">
  <iframe width="420" height="315" id="video">
</iframe>
    </div>
  </div>
      
  
      
</body>
​
</html>
 
body {
  background-color: #3cb5d8;
  font-family: 'Oswald', sans-serif;
}
​
h1 {
  font-size: 150px;
  color: #FA334F;
  text-align: center;
}
​
​
.container {
  position: relative;
  top: 0px;
}
​
#video {
  display: block;
  margin: 0 auto;
}
​
.field {
  display:flex;
  position:realtive;
  margin:5em auto;
  width:80%;
}
​
.field>input[type=text],
.field>button {
  display:block;
  font:1.2em Myriad Pro;
}
​
.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em ;
}
​
.field>button {
  padding:0.6em 0.8em;
  background-color:#2ecc71;
  color:white;
  border:none;
}
.field>button:hover {
    cursor:pointer;
}
​
 
function search()
{
    var api_key; 
    api_key = "AIzaSyDiUEkwoldcB9qgRreOsaiyu2Nlj8U-03c";
​
    var search_term = document.getElementById("searchterm").value;
​
    function onSuccess(data){
        console.log(data);
        var obj = data.id;
        console.log (data.items[0].id.videoId);
  
        video_url = 'http://www.youtube.com/embed/' + data.items[0].id.videoId     +'?autoplay=1'; 
        video.src = video_url;
    }
​
    var youtube_url = 'https://www.googleapis.com/youtube/v3/search?part=id&q=' +search_term +'&maxResults=1&key=' +api_key;
​
    var video_url = 'http://www.youtube.com/embed/' +"IQ1_acLEVVo"+'?autoplay=1'; 
​
​
    $.ajax({
      method:'GET',
      url: youtube_url,
      success: onSuccess
    });
​
}
​
​
/*
// api_key: AIzaSyDiUEkwoldcB9qgRreOsaiyu2Nlj8U-03c
​
// Function to return data
function onSuccess(data) {
  console.log(data);
  video.src = video_url;
  
}
​
​
/*function storeVideoIds() {
  var videoIds = "";
  
}*/
​
/*
​
var search_term = "dogs";
​
var api_key = "AIzaSyDiUEkwoldcB9qgRreOsaiyu2Nlj8U-03c";
​
var youtube_url = 'https://www.googleapis.com/youtube/v3/search?part=id&q=' +search_term +'&maxResults=1&key=' +api_key;
​
var video_url = 'http://www.youtube.com/embed/' +"59Zcx9YbZxI"+'?autoplay=1'; 
​
​
​
// GET request
$.ajax({
  method: 'GET',
  url: youtube_url,
  success: onSuccess
  }); */
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers