Javascript 从YouTube播放器API调用单个函数？

我想使用调用一个函数来停止一个嵌入式YT视频（使用JS和jQuery在页面上动态加载）的播放

我承认（非常）不熟悉使用API进行web开发，尽管阅读了其他几个答案（如和），但我仍然对不同JS组件的必要性感到困惑

---

我有一个代码块，它被动态地多次附加到HTML页面上，YouTube URL根据一个单独的JSON文件为每个条目更改。添加的代码如下所示

。。。然后我在加载（？）API的

底部添加了

标记

。。。最后是一个简单的按钮进行演示

停止视频

---

我希望有一种方法可以简单地调用

player.stopVideo（）函数，并使其影响按钮上已嵌入的iFrame，如

$（'button'）。在（'click'，函数（）{
$（'.youtube video iframe'）.stopVideo（）；
});

。。。但是，唉，事情似乎没那么简单


文档和其他答案似乎建议为播放器定义各种变量和函数，或者手动加载视频（而不是像本例中那样动态加载）；但是对于一个已经加载到页面上的元素来说，这似乎是不必要的复杂——是否有我遗漏的东西或者简化事情的明显方式

详细的答案将不胜感激，因为我仍在掌握JS的基本知识

谢谢！：）
 因此，在我的情况下，通过在评论中玩弄New的小提琴，我相信我找到了实现Youtube播放器API的最简单方法


首先，它需要对HTML
代码块进行少量编辑，实际上，这些代码块将动态加载到我的页面上：

<li>
    <section class="active">
        <iframe id="youtube-video" src="https://www.youtube.com/embed/y1yFiotx3qk?
        rel=0&modestbranding=1&showinfo=0&enablejsapi=1" frameborder="0"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </section>
</li>

。。。但是，我们发现这一点很重要，它被放置在同一位置的所有其他
标记之上


接下来，我将我的JS文件（使用jQuery）设置如下：

$(document).ready(function () {

    // Creates arbitrary global 'player' variable to be defined later
    var player;

    function onYouTubeIframeAPIReady() {

        setTimeout(function() { //Using this as seemed to come across occasional bugs in Chrome

            console.log('API Loaded!')

            // Selects first <li> tag iframe contained in a section with the class of '.active'
            var $selectedVideo = $('.active #youtube-video')[0];

            // Uses the previous variable to define the youtube player
            player = new YT.Player($selectedVideo);

        }, 100);

    }

    // Calls the Function
    onYouTubeIframeAPIReady();

});

我的代码背后的意图是形成幻灯片的一部分，因此在任何时候都应该只有一个部分具有
.active
类，这可以用于选择不同幻灯片上的不同视频


我已经整理了一个示例JSFIDLE，其中包含了更好的UI和更深入的注释，这对将来的人可能会有用。
你能提供你的youtube播放器源代码吗？这样我可以看看你是如何设置播放器属性的吗？谢谢。
stopVideo
是jquery的东西吗？否则，
$（'.youtube-video-iframe'）[0]。停止视频（）may workHi@NewToJS，这可能表明我缺乏理解，但这段代码会是什么样子？到目前为止，我写的唯一代码是插入包含iframe的html
块，我正在努力解决如何设置播放器属性以及需要包含/定义/设置什么等问题？@Jaromanda X，
stopVideo（）
函数来自YouTube API文档，其中它被列为
player.stopVideo（）也许这个例子会有所帮助
$(document).ready(function () {

    // Creates arbitrary global 'player' variable to be defined later
    var player;

    function onYouTubeIframeAPIReady() {

        setTimeout(function() { //Using this as seemed to come across occasional bugs in Chrome

            console.log('API Loaded!')

            // Selects first <li> tag iframe contained in a section with the class of '.active'
            var $selectedVideo = $('.active #youtube-video')[0];

            // Uses the previous variable to define the youtube player
            player = new YT.Player($selectedVideo);

        }, 100);

    }

    // Calls the Function
    onYouTubeIframeAPIReady();

});

$('button').on('click', function(){
    player.stopVideo();
});