Question

我是JavaScript的新手。

我试图制作一个YouTube 2.0 html的东西，（有趣的学习经历）。我希望它是这样你点击加载视频＆＃34;链接，它会询问您实际YouTube视频的链接。然后，当您将其粘贴后，它会在页面上显示视频。

我的代码是

＆＃13;

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
<a href="#" onclick="openVideo()">Load video</a>
<script>
	var theVideoLink;
	
	var openVideo = function() {
		var videoLink = prompt("Video link on YouTube.com");
		theVideoLink = videoLink;
	};
	
	window.onload = function() {
		document.getElementById("myLink").innerHTML=theVideoLink;
	}
</script>

<iframe width="1120" height="630" src="myLink" frameborder="0" allowfullscreen></iframe>

＆＃13;

如果您对如何将JavaScript变量插入我的iframe src标记有任何想法，请告诉我。谢谢！

Answer 1

此代码将<iframe>导航到在提示对话框中输入的URL。

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
<a href="#" onclick="openVideo()">Load video</a>
<script>

var openVideo = function() {
    var videoLink = prompt("Video link on YouTube.com");
    window.open(videoLink, "myLink");
}

<iframe width="1120" height="630" name="myLink" frameborder="0" allowfullscreen></iframe>

希望这有帮助。

更新：此代码仅将<iframe>导航到指定的网址。您应该使用Youtube嵌入选项而不是此。

Answer 2

在您的代码中，iframe错误。你需要指定＆＃34; myLink＆＃34;因为 id 而不是 src 。

然后，您需要将youtube链接（类似于＆＃34; https://www.youtube.com/watch?v= {videoId}＆＃34;）转换为iframe链接（类似于＆＃34; https://www.youtube.com/embed/ { VIDEOID}＆＃34）。要实现这一点，您需要了解regexp。以下内容适用：

＆＃13;

var ytLink = prompt('Give me a youtube link please !');
var iframe = document.getElementById('youtube');
var ytId   = ytLink.match(/v=([-A-Za-z]+)/)[1];

iframe.src = 'https://www.youtube.com/embed/' + ytId;

＆＃13;

<iframe width="560" height="315" src="" id="youtube" frameborder="0" allowfullscreen></iframe>

＆＃13;

我建议您在MDN上了解有关正则表达式的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Answer 3

您无法更改iframe src，但我们可以用新的iframe替换您的iframe。

注意，我已将iframe ID设置为myLink，替换了src属性。

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
<a href="#" onclick="openVideo()">Load video</a>

<iframe width="1120" height="630" id="myLink" frameborder="0" allowfullscreen></iframe>
<script>
openVideo = function() {
  var videoLink = prompt("Video link on YouTube.com");
  var iframe=document.getElementById('myLink');

  var new_iframe = document.createElement("iframe");
        new_iframe.src=videoLink;

  let attr;
  let attributes = Array.prototype.slice.call(iframe.attributes);
  while(attr = attributes.pop()) {
    if (attr.nodeName!='src')
        new_iframe.setAttribute(attr.nodeName, attr.nodeValue);
  }

  iframe.parentNode.replaceChild(new_iframe, iframe);
}
</script>

确保以以下格式嵌入嵌入链接：

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

工作JS小提琴：

https://jsfiddle.net/aa0kzqsz/2/

Answer 4

您必须使用嵌入链接而不是完整链接

喜欢：https://www.youtube.com/embed/ videoID

＆＃13;

	
	var openVideo = function() {
		var videoID = prompt("Video id on YouTube.com");
    var embed = 'https://www.youtube.com/embed/'
		document.getElementById("myFrame").src=embed+videoID;
	};

＆＃13;

<h1 style="background-color: red; color: white; font-family: helvetica; padding: 20px 20px 20px 20px;">Youtube 2.0</h1>
<a href="#" onclick="openVideo()">Load video</a>


<iframe id=myFrame width="1120" height="630" src=# frameborder="0" allowfullscreen></iframe>

＆＃13;

在HTML代码中使用JavaScript变量

4 个答案: