javascript 使用 jQuery 更改 YouTube iframe src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26723720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change YouTube iframe src with jQuery
提问by whaaaaaaz
I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
我正在尝试使用 jQuery 更改 YouTube 视频 iframe 源，但看起来遇到了跨源问题。我的jQuery代码：
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
iframe 获取新的 src 值，但不显示视频。有任何想法吗？
extended explanation:
扩展解释：
There is a popup div with embeded youtube video
有一个带有嵌入 youtube 视频的弹出式 div
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
有一个特定的 td 包含一个新的 src url。除了从这个 td 之外，没有其他地方或方法可以获取此 url。
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
并且有一个脚本应该在打开的弹出窗口中添加 src 并在关闭时删除。
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
ps 现在我已经布置好了，user3385530 可能是对的
回答by Salman A
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
您不能在 iframe 中显示来自 www.youtube.com 的页面。正确的方法是在您的网页中使用他们的视频嵌入代码。IFrame 嵌入更容易，您需要在 iframe 中显示的 URL 如下所示：
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
只需在您的网页中放置一个像这样的 iframe：
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
最后，假设您能够使用 jQuery 从 URL 中提取视频 ID，您可以使用它来显示视频*：
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the srcproperty of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
* 更改src已显示 YouTube 视频的 iframe的属性不起作用；因此，我建议使用 destroy-iframe-recreate-iframe 方法。
回答by Ansyori
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
回答by user3385530
This will not work because page is parsed and only on refresh with new ulr will happen.
这将不起作用，因为页面被解析并且只有在使用新的 ulr 刷新时才会发生。
You need to use ajax to pre-load the page with new url and then to set iframe.
您需要使用 ajax 使用新 url 预加载页面，然后设置 iframe。
