Question

我正在尝试使用嵌入YouTube视频（但您输入的网址）的HTML创建代码。我会输入网址（例如：www.youtube.com/watch?v=XXXXXXXXXXX），然后它会嵌入该视频。这就是我到目前为止:(我是HTML新手）

<!DOCTYPE html>
<html>

<form>
  Video URL:<br>
  <input id="url" type="url">
  <iframe width="560" height="315" src="url" frameborder="0" allowfullscreen></iframe>
</form>

<iframe width="420" height="315"
src="url">
</iframe>

</html>

Answer 1

尝试从那个小提琴继续：

https://jsfiddle.net/8kodfrsy/

我所做的只是更改视频src属性。

document.getElementById('myframe').src = url;

如果您引用此回答here，您会发现该视频的网址需要/embed/<video id>

因此，例如，如果您有以下网址：

https://www.youtube.com/watch?v=ChOTlnQZ4uU

您要将其更改为：

https://www.youtube.com/embed/ChOTlnQZ4uU

因此，只需转换字符串即可获取视频ID并使用简单的js修改url字符串。

检查this如何转换字符串网址。

Answer 2

我认为，最佳答案是以下代码：

<form action="http://www.youtube.com/results" method="get" target="_blank" >
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>

嵌入用户输入的YouTube视频

2 个答案: