添加加载嵌入 YouTube 播放器的搜索框答案

【问题标题】：Add Search Box that Loads Embed YouTube Player添加加载嵌入 YouTube 播放器的搜索框
【发布时间】：2012-12-20 19:52:58
【问题描述】：

我已经查看并尝试了一堆不同的代码，但无法弄清楚。

我想做的是在我的页面上添加一个搜索框，根据搜索查询加载 YouTube 播放列表和在嵌入式播放器上播放。

我的代码：

<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>

结果

搜索框和播放器加载。但是，无论您搜索什么，都会加载相同的播放列表。

如果我右键单击视频并查看嵌入的 HTML，结果如下：

<iframe width="640" height="360" src="http://www.youtube.com/embed/6DYngiqZim0?
feature=player_embedded" frameborder="0" allowfullscreen></iframe>

如您所见，src 已更改。 YouTube 可能会阻止这种行为吗？也许我的网址有误？

请帮忙！

【问题讨论】：

标签： search iframe youtube embed playlist

【解决方案1】：

变化：

var search_field = document.getElementById('yourtextfield').text ;

到：

var search_field = document.getElementById('yourtextfield').value ;

【讨论】：

【解决方案2】：

只需在第 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>

【讨论】：