Question

我正在为一位朋友创建一个网站，并且其中嵌入了几个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>

请帮忙。感谢

Answer 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

Answer 2

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

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

player.playVideo()和player.stopVideo()

如何停止嵌入的Youtube视频

2 个答案: