在 WP 中选择更改时更改 YouTube iFrame 源

Posted 2023-05-09

【中文标题】在 WP 中选择更改时更改 YouTube iFrame 源

【英文标题】：Change YouTube iFrame source on select change in WP

【发布时间】：2018-11-21 03:36:27

【问题描述】：

在 WP 模板中，我正在通过 iFrame 加载 YouTube 播放列表。我在它上面有一个选择框，允许用户选择另一个播放列表。这看起来很简单，但我一直遇到浏览器安全问题。

jQuery(document).ready(function() 
  $('#channelChooser').change(function() 
    $(this).next('iframe').attr('src', this.value);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="channelChooser" id="channelChooser">
  <option value="https://www.youtube.com/playlistlist=one">One</option>
  <option value="https://www.youtube.com/playlist?list=Two">Two</option>
  <option value="https://www.youtube.com/playlist?list=Three">Three</option>
</select>
<iframe id="ytplayer" type="text/html"   src="https://www.youtube.com/embed/?enablejsapi=One&listType=playlist" frameborder="0" allowfullscreen></iframe>

我得到这个错误：

拒绝在框架中显示“https://www.youtube.com/playlist?list=Two”，因为它将“X-Frame-Options”设置为“sameorigin”。

我只是希望能够在选择时更改 youtube 播放列表，最好没有插件，因为这应该很简单。谢谢！

【问题讨论】：

您的代码似乎在这里工作，虽然 youtube 确实说“无效参数”...

我没有在其中留下实际的播放列表，但我的代码中有真实的播放列表。不知道为什么第一个加载正常，但更改它会触发 Chrome 中的浏览器安全警告

我明白了。是的，我可以使用真实的播放列表 URL 重现该问题。

可能您使用的播放列表 URL 错误。

【参考方案1】：

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

Embed videos & playlists

【讨论】：

抱歉，链接已修复！

谢谢！嵌入链接的格式错误。找到您建议的链接，它按预期工作！非常感谢。