jQuery iframe 无法设置 youtube 网址

Question

我正在努力

这是我的 HTML 中的代码

<iframe class="embed-responsive-item"  id="placeYoutubeVideo"
        style="display:none" src="#" style="display:none" allowfullscreen></iframe>

在 jQuery 中我正在尝试更改视频的 src

var neww = 'https://youtu.be/NOubzHCUt48';
        $('#placeYoutubeVideo').prop('src', neww)

但它抛出以下错误：

拒绝显示 'https://www.youtube.com/watch?v=NOubzHCUt48&feature=youtu.be' 在一个 框架，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

我该如何解决这个问题？

如果不可能，是否可以通过点击功能生成带有 youtube url 的 iframe？

请帮忙。

Answer 1

试试这个

<iframe class="embed-responsive-item" id="placeYoutubeVideo" src="#" allowfullscreen></iframe> 
<script> 
$(document).ready(function () { 
var neww = 'http://www.youtube.com/embed/NOubzHCUt48'; $('#placeYoutubeVideo').attr('src', neww); }); 
</script>

https://jsfiddle.net/vyt7gxwz/

HTTP -> HTTPS = 错误（X-Frame-Options' 到 'SAMEORIGIN）

HTTP -> HTTP = OK

HTTPS -> HTTPS = 正常

HTTPS -> HTTP = ERROR (X-Frame-Options' to 'SAMEORIGIN)

Answer 2

相反，您可以replaceWith

 var neww = 'https://youtu.be/NOubzHCUt48';
 var newContent = '<iframe class="embed-responsive-item"  id="placeYoutubeVideo" style="display:none" src="'+neww +'" style="display:none"  allowfullscreen></iframe>'

// Replace 'neww ' with your new URL

     $('#placeYoutubeVideo').replaceWith(newContent );

Answer 3

试试这个

var neww = 'https://youtu.be/NOubzHCUt48';
iframe.setAttribute("src", neww);

---

语法

element.setAttribute(attributename,attributevalue)

参数值

attributename   |  String   |  Required. The name of the attribute you want to add
attributevalue  |  String   |  Required. The value of the attribute you want to add

HTML DOM setAttribute() Method

---

编辑 01

如果您只想将其添加到一个元素中

document.getElementsByID("placeYoutubeVideo").setAttribute("src", neww); 

Answer 4

X-Frame-Options: Sameorigin 被 YouTube 用来阻止 clickjacking。您将需要嵌入实际的播放列表。

Embed videos & playlists