时间戳

首页 > 解决方案 > 在 WP 中选择更改时更改 YouTube iFrame 源

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

问题描述

在 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" width="720" height="405" 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 播放列表，最好没有插件，因为这应该很简单。谢谢！

标签： jquerywordpressiframe

解决方案

X-Frame-Options: SameoriginYouTube 使用它来防止点击劫持。您将需要嵌入实际的播放列表。

嵌入视频和播放列表

推荐阅读