Add Search Box that Loads Embed YouTube Player
I've looked and tried a BUNCH of different codes and can't figure this out.
What I'd like to do is add a search box on my page that loads a YouTube playlist based on the search query and plays it on an embedded player.
My Code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function go_get(){
var base_url = 'http://www.youtube.com/embed?listType=search&list=' ;
var search_field = document.getElementById('yourtextfield').text ;
var target_url = base_url + search_field ;
var ifr = document.getElementById('youriframe') ;
ifr.src = target_url ;
return false ;
}
</script>
<form onsubmit="go_get(); return false;" >
<input type="text" id="yourtextfield"/>
<input type="submit" value="Search Playlists" />
</form>
<iframe id="youriframe" width="640" height="360" ></iframe>
</body>
</html>
Result
The search box and player loads. However, the same playlist is loaded no matter what you search.
If I right-click on the video and view the embed HTML this is the result:
<iframe width="640" height="360" src="http://www.youtube.com/embed/6DYngiqZim0?
feature=player_embedded" frameborder="0" allowfullscreen></iframe>
As you can see the src has changed. Could YouTube maybe be preventing this behavior? Perhaps my URL is wrong?
Please Help!
Answer
Just change the "text" option with "value" on line 12
<html>
<head>
<title>Youtube playlist search</title>
</head>
<body>
<script type="text/javascript">
function go_get(){
var base_url = 'http://www.youtube.com/embed?listType=search&list=';
var search_field = document.getElementById('yourtextfield').value;
var target_url = base_url + search_field;
var ifr = document.getElementById('youriframe');
ifr.src = target_url;
return false;
}
</script>
<form onsubmit="go_get(); return false;" >
<input type="text" id="yourtextfield"/>
<input type="submit" value="Search Playlists" />
</form>
<iframe id="youriframe" width="640" height="360" ></iframe>
</body>
</html>