如何停止嵌入的 Youtube 视频答案

【问题标题】：How to stop embedded Youtube videos如何停止嵌入的 Youtube 视频
【发布时间】：2014-02-02 15:16:47
【问题描述】：

我正在为一个朋友创建一个网站，其中嵌入了几个 youtube 音乐视频。当单击“showvm”类的 div 时，我试图让 youtube 视频停止。我已经查看了类似的主题，但仍然无法弄清楚如何让它们停止。
视频代码如下，这里是jsfiddle。

<div class="videoscreen">
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/jGec7pMBvsk?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/7cT7FAkQZ2Q?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/JE-FUZPic2E?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/DWpl2CaCnVA?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/yebXjZA60OQ?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/QuOu31aIiKY?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/04FdisNU3vw?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/_H7ZG7yk5Wo?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/yZvXb38z_R8?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/iUtGJtyoIfg?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/xF3MC8PWgJE?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
<div class="video"><iframe width="480" height="270" src="http://www.youtube-nocookie.com/embed/akPDKYwIoVk?rel=0&iv_load_policy=3&wmode=transparent" frameborder="0" allowfullscreen></iframe></div>
</div>

请帮忙。谢谢

【问题讨论】：

停止 iframe 视频的最简单方法通常是删除 iframe src，然后重新添加。

标签： javascript jquery video youtube

【解决方案1】：

用途：

$('#videoscreen iframe').each(function() {

//First get the  iframe URL
var url = $(this).attr('src');

//Then assign the src to null, this then stops the video been playing
$(this).attr('src', '');

// Finally you reasign the URL back to your iframe, so when you hide and load it again you still have the link
$(this).attr('src', url);
});

working fiddle

【讨论】：

你能再解释一下吗？我对如何实现这一点有点困惑。
你对什么感到困惑。需要在$('.showvm').click(function(){中添加以上代码
我在你说的地方添加了它，它并没有停止视频，但是当我将“#videoscreen”更改为“.video”时它起作用了。非常感谢！
是的，您的原始标记没有该 ID。甚至在答案中创造了小提琴
问题：这似乎会影响动画的性能吗？至于我，它似乎使动画真的很滞后。我不是在抱怨只是想知道

【解决方案2】：

使用 youtube javascript API：https://developers.google.com/youtube/js_api_reference

设置完成后，您可以按 ID（而不是 URL）加载视频，并且可以使用以下功能：

player.playVideo() 和 player.stopVideo()

【讨论】：

请解释一下如何做到这一点，我已经在其他主题上看到了这个答案，我真的很困惑如何实现它
阅读本页的入门部分：developers.google.com/youtube/iframe_api_reference，它包含您需要的深入体面的起点。