blocks|key|694293|text|您可以通过调用YouTube+player实例上的stopVideo()方法来停止视频，然后再隐藏div。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|694294|player.stopVideo()|code-block|syntax|javascript|694295|有关更多详细信息，请参阅此处：http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls|694296|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls^0|P|B|0|0|F|23|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can stop the video by calling the <code>stopVideo()</code> method on the YouTube player instance before hiding the div e.g.</p>

<pre><code>player.stopVideo()
</code></pre>

<p>For more details see here: <a href="http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls" rel="noreferrer">http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls</a></p>


blocks|key|694323|text|一个简单的方法是简单地将视频的src设置为空，这样视频就会在隐藏时消失，然后当你点击打开视频的链接时，将src设置回你想要的视频。为此，只需为youtube+iframe设置一个id，并使用该id调用src函数，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|694324|<script+type="text/javascript">
function+deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function+LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>

<body>

<p+onclick="LoadVideo()">LOAD+VIDEO</P>
<p+onclick="deleteVideo()">CLOSE</P>

<iframe+id="VideoPlayer"+width="853"+height="480"+src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE"+frameborder="0"+allowfullscreen></iframe>

</boby>|code-block|syntax|javascript|694325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Hey an easy way is to simply set the src of the video to nothing, so that the video will desapear while it's hidden an then set the src back to the video you want when you click on the link that opens the video.. to do that simply set an id to the youtube  iframe and call the src function using that id like this:</p>

<pre><code>&lt;script type="text/javascript"&gt;
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}

function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
&lt;/script&gt;

&lt;body&gt;

&lt;p onclick="LoadVideo()"&gt;LOAD VIDEO&lt;/P&gt;
&lt;p onclick="deleteVideo()"&gt;CLOSE&lt;/P&gt;

&lt;iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;

&lt;/boby&gt;
</code></pre>


blocks|key|478299|text|由于在使用other+answers中提到的playVideo+/+pauseVideo命令之前，您需要在iframe的src中设置?enablejsapi=true，因此通过Javascript以编程方式添加此命令可能会很有用(特别是在以下情况下，例如，.您希望此行为适用于由其他用户嵌入的视频，这些用户刚刚剪切并粘贴了YouTube嵌入代码。在这种情况下，下面这样的代码可能会很有用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|478300|function+initVideos()+{

++//+Find+all+video+iframes+on+the+page:
++var+iframes+=+$(".video").find("iframe");

++//+For+each+of+them:
++for+(var+i+=+0;+i+<+iframes.length;+i%2B%2B)+{
++++//+If+"enablejsapi"+is+not+set+on+the+iframe's+src,+set+it:
++++if+(iframes[i].src.indexOf("enablejsapi")+===+-1)+{
++++++//+...check+whether+there+is+already+a+query+string+or+not:
++++++//+(ie.+whether+to+prefix+"enablejsapi"+with+a+"?"+or+an+"&")
++++++var+prefix+=+(iframes[i].src.indexOf("?")+===+-1)+?+"?"+:+"&amp;";
++++++iframes[i].src+%2B=+prefix+%2B+"enablejsapi=true";
++++}
++}
}|code-block|syntax|javascript|478301|如果你在document.ready上调用它，那么在一个类为“...if”的div中的所有iframe都会将enablejsapi=true添加到它们的源代码中，这样playVideo+/+pauseVideo命令就可以对它们起作用了。|478302|(注意：本例对设置var+iframes的那一行代码使用了jQuery，但如果您不使用jQuery，一般的方法应该也适用于纯Javascript+)。|478303|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe#answer-8668741^0|M|9|Y|A|1U|H|5|D|0|0|0|4|E|1I|G|0|9|B|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Since you need to set <code>?enablejsapi=true</code> in the src of the iframe before you can use the <code>playVideo</code> / <code>pauseVideo</code> commands mentioned in <a href="https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe#answer-8668741">other answers</a>, it might be useful to add this programmatically via Javascript (especially if, eg. you want this behaviour to apply to videos embedded by other users who have just cut and paste a YouTube embed code). In that case, something like this might be useful:</p>

<pre><code>function initVideos() {

  // Find all video iframes on the page:
  var iframes = $(".video").find("iframe");

  // For each of them:
  for (var i = 0; i &lt; iframes.length; i++) {
    // If "enablejsapi" is not set on the iframe's src, set it:
    if (iframes[i].src.indexOf("enablejsapi") === -1) {
      // ...check whether there is already a query string or not:
      // (ie. whether to prefix "enablejsapi" with a "?" or an "&amp;")
      var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&amp;amp;";
      iframes[i].src += prefix + "enablejsapi=true";
    }
  }
}
</code></pre>

<p>...if you call this on <code>document.ready</code> then all iframes in a div with a class of "video" will have <code>enablejsapi=true</code> added to their source, which allows the playVideo / pauseVideo commands to work on them.</p>

<p>(nb. this example uses jQuery for that one line that sets <code>var iframes</code>, but the general approach should work just as well with pure Javascript if you're not using jQuery).</p>


blocks|key|478341|text|RobW的方法对我很有效。对于使用jQuery的人，这里有一个我最终使用的简化版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|478342|var+iframe+=+$(video_player_div).find('iframe');

var+src+=+$(iframe).attr('src');++++++

$(iframe).attr('src',+'').attr('src',+src);|code-block|syntax|javascript|478343|在本例中，"video_player“是包含iframe的父div。|478344|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>RobW's way worked great for me. For people using jQuery here's a simplified version that I ended up using:</p>

<pre><code>var iframe = $(video_player_div).find('iframe');

var src = $(iframe).attr('src');      

$(iframe).attr('src', '').attr('src', src);
</code></pre>

<p>In this example "video_player" is a parent div containing the iframe.</p>


blocks|key|478393|text|我想分享我想出的一个解决方案，如果你在一个页面上嵌入了多个YouTube视频，那么这个解决方案就可以使用jQuery。在我的例子中，我为每个视频定义了一个模式弹出窗口，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|478394|<div+id="videoModalXX">
...
++++<button+onclick="stopVideo(videoID);"+type="button"+class="close"></button>
++++...
++++<iframe+width="90%25"+height="400"+src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3"+frameborder="0"+allowfullscreen></iframe>
...
</div>|code-block|syntax|javascript|478395|在本例中，videoModalXX表示视频的唯一id。然后，下面的函数会停止视频：|478396|function+stopVideo(id)
{
++++$("#videoModal"+%2B+id+%2B+"+iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',+'*');
}|478397|我喜欢这种方法，因为它使视频在您离开的地方暂停，以防您稍后想要返回并继续观看。它对我来说工作得很好，因为它在视频模式中寻找具有特定id的iframe。不需要特殊的YouTube元素ID。希望有人会发现这也很有用。|478398|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I wanted to share a solution I came up with using jQuery that works if you have multiple YouTube videos embedded on a single page.  In my case, I have defined a modal popup for each video as follows:</p>

<pre><code>&lt;div id="videoModalXX"&gt;
...
    &lt;button onclick="stopVideo(videoID);" type="button" class="close"&gt;&lt;/button&gt;
    ...
    &lt;iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
...
&lt;/div&gt;
</code></pre>

<p>In this case, videoModalXX represents a unique id for the video.  Then, the following function stops the video:</p>

<pre><code>function stopVideo(id)
{
    $("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
</code></pre>

<p>I like this approach because it keeps the video paused where you left off in case you want to go back and continue watching later.  It works well for me because it's looking for the iframe inside of the video modal with a specific id.  No special YouTube element ID is required.  Hopefully, someone will find this useful as well.</p>


blocks|key|694527|text|这是一个简单的jQuery片段，可以根据RobW和DrewT的回答暂停页面上的所有视频：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|694528|jQuery("iframe").each(function()+{
++jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}',+'*')
});|code-block|syntax|javascript|694529|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a simple jQuery snippet to pause all videos on the page based off of RobW's and DrewT's answers:</p>

<pre><code>jQuery("iframe").each(function() {
  jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
</code></pre>


blocks|key|478472|text|只需删除iframe的src|type|unstyled|depth|inlineStyleRanges|entityRanges|data|478473|$('button.close').click(function(){
++++$('iframe').attr('src','');;
});|code-block|syntax|javascript|478474|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>just remove src of iframe</p>

<pre><code>$('button.close').click(function(){
    $('iframe').attr('src','');;
});
</code></pre>


blocks|key|694616|text|这种方法需要jQuery。首先，选择您的iframe：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|694617|var+yourIframe+=+$('iframe#yourId');
//yourId+or+something+to+select+your+iframe.|code-block|syntax|javascript|694618|现在您选择按钮播放/暂停此iframe并点击它|694619|$('button.ytp-play-button.ytp-button',+yourIframe).click();|694620|我希望它能对你有所帮助。|694621|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This approach requires jQuery. First, select your iframe:</p>

<pre><code>var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.
</code></pre>

<p>Now you select button play/pause of this iframe and click it</p>

<pre><code>$('button.ytp-play-button.ytp-button', yourIframe).click();
</code></pre>

<p>I hope it will help you.</p>


blocks|key|694719|text|更简洁、更优雅、更安全的答案是:在视频地址的末尾添加“？enablejsapi=1”，然后构造一个表示暂停命令的普通对象并将其串化：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|694720|const+YouTube_pause_video_command_JSON+=+JSON.stringify(Object.create(null,+{
++++"event":+{
++++++++"value":+"command",
++++++++"enumerable":+true
++++},
++++"func":+{
++++++++"value":+"pauseVideo",
++++++++"enumerable":+true
++++}
}));|code-block|syntax|javascript|694721|使用Window.postMessage方法将生成的JSON字符串发送到嵌入的视频文档：|offset|length|style|CODE|694722|//+%7Ciframe_element%7C+is+defined+elsewhere.
const+video_URL+=+iframe_element.getAttributeNS(null,+"src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON,+video_URL);|694723|确保您为Window.postMessage方法的targetOrigin参数指定了视频URL，以确保您的消息不会发送给任何非预期的收件人。|694724|entityMap^0|0|0|2|I|0|0|4|I|P|C|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

<p>A more concise, elegant, and secure answer: add “?enablejsapi=1” to the end of the video URL, then construct and stringify an ordinary object representing the pause command:</p>

<pre><code>const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
    "event": {
        "value": "command",
        "enumerable": true
    },
    "func": {
        "value": "pauseVideo",
        "enumerable": true
    }
}));
</code></pre>

<p>Use the <code>Window.postMessage</code> method to send the resulting JSON string to the embedded video document:</p>

<pre><code>// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);
</code></pre>

<p>Make sure you specify the video URL for the <code>Window.postMessage</code> method’s <code>targetOrigin</code> argument to ensure that your messages won’t be sent to any unintended recipient.</p>


<p>I have a hidden div containing a YouTube video in an <code>&lt;iframe&gt;</code>. When the user clicks on a link, this div becomes visible, the user should then be able to play the video.</p>

<p>When the user closes the panel, the video should stop playback. How can I achieve this?</p>

<p>Code:</p>

<pre><code>&lt;!-- link to open popupVid --&gt;
&lt;p&gt;&lt;a href="javascript:;" onClick="document.getElementById('popupVid').style.display='';"&gt;Click here&lt;/a&gt; to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.&lt;/p&gt;

&lt;!-- popup and contents --&gt;
&lt;div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;"&gt;

  &lt;iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;

  &lt;br /&gt;&lt;br /&gt; 
  &lt;a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';"&gt;
  close
  &lt;/a&gt;
&lt;/div&gt;&lt;!--end of popupVid --&gt;
</code></pre>


How to pause a YouTube player when hiding the iframe?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个在<iframe>中包含YouTube视频的隐藏div。当用户点击一个链接时，这个div变得可见，然后用户应该能够播放视频。当用户关闭面板时，视频应停止播放。我如何才能做到这一点？代码：<p><a href="javascript:;" onClick...

问如何在隐藏iframe时暂停YouTube播放器？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在隐藏iframe时暂停YouTube播放器？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在隐藏iframe时暂停YouTube播放器？
EN