加载YouTube视频阵列，在显示div时播放

Question

TL; DR ：我希望 this page 上的每个YouTube视频都像第一个一样 - 展开内容块时自动播放，当你关闭它时暂停。 Source包含已注释掉的开发代码。

---

我正在处理一个包含隐藏内容的多个div的页面。每个div都包含一个YouTube视频，需要在内容再次隐藏时暂停。使用普通的嵌入代码，您无法执行此操作，因此我使用了YouTube Javascript API。

要加载视频数组并创建每个控制器，我找到this SO post并使用它的示例来填充数组并存储数据。每个<iframe>都已成功创建，现在我遇到了控制器的问题。

我创建了一个函数playMedia()，在脚本末尾调用该函数显示内容：

$(".title").click(function() {
        var clickedPost = $(this).parent();
        $('.post').not($(this).parent()).removeClass('active');
        clickedPost.toggleClass('active', 500);
        playMedia();
    });

在函数中，我需要它：

1. 检查div是否有效
2. 定位iframe孩子
3. div打开时自动播放，关闭时暂停。

以下是我尝试的内容：

function playMedia() {
        // Set the ID of the controller to target
        var playerId = $(".post.active > iframe").attr('id');
        console.log(playerId);  // returns undefined
        if ($('.title').parent().hasClass('active')) {
        playerId.playVideo();
        }
    }

我有一种预感，就是我如何尝试定位活跃的iframe，但我不能 - 因为我的生活 - 找出错误的位置是。其他人的眼睛也很受欢迎。