在视频周围添加 html 会阻止 Vimeo api 工作

Question

我在一个网站上有一个页面，并且块中有几个视频。当我播放一个视频然后点击关闭按钮或单击另一个框将其打开时，一切正常。但当我在视频周围添加额外的 html 标记时，问题就出现了，它破坏了关闭按钮的行为。

这是一个框的标记（我的页面中有多个框）：

<div class="box" data-size="660,605">
    <div class="cunload2">
        <div class="expandable">
            <span class="simple">
                <a class="cunload" href="javascript:;"></a>
            </span>

            <div class="exandable-vids-container">
                <iframe ... ></iframe>
            </div>
        </div>
    </div>  
</div>

cunload 按钮是关闭框并卸载视频的按钮。

这是 javascript（如 vimeo api 页面 所示）：

(function(){
    var vimeoPlayers = document.querySelectorAll('iframe'), player;

    for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
        player = vimeoPlayers[i];
        $f(player).addEvent('ready', ready);
    }

    function addEvent(element, eventName, callback) {
        if (element.addEventListener) { element.addEventListener(eventName, callback, false); }
        else { element.attachEvent(eventName, callback, false); }
    }

    function ready(player_id) {
        var container = document.getElementById(player_id).parentNode.parentNode,
            froogaloop = $f(player_id),
            apiConsole = container.querySelector('.console .output');

        function setupSimpleButtons() {
            var unloadBtn = container.querySelector('.simple').querySelector('.cunload');
            addEvent(unloadBtn, 'click', function() { froogaloop.api('unload'); }, false);
        }

        setupSimpleButtons();
        $(".cunload, .box:not(.expanded)").click(function(){
             //if (!$(this).is('expanded')) {
                froogaloop.api('unload');
             //} 
        });
    }
})();

这工作得很好，但是当我在 iframe 周围添加额外的

（而且我确实需要）时，它不再起作用。

有什么线索吗？

编辑：问题更复杂，我在 iframe 周围添加了

和
• 标签，如下所示：

<div class="box" data-size="660,605">
    <div class="cunload2">
        <div class="expandable">
            <span class="simple">
                <a class="cunload" href="javascript:;"></a>
            </span>

            <div class="exandable-vids-container">
                <ul>
                    <li><iframe ... ></iframe></li>
                    <li><iframe ... ></iframe></li>
                </ul>
            </div>
        </div>
    </div>  
</div>

并将 js 行修改

var container = document.getElementById(player_id).parentNode.parentNode

为：

var container = document.getElementById(player_id).parentNode.parentNode.parentNode.parentNode

我得到了它的工作。

问题是我使用

和
• 标签来调用 jcarousel 并且它在我的 .exandable-vids-container 和
  之间添加了额外的 3 个 div。此外，有时我会调用这个轮播，有时不会，所以我真的不能在js中添加额外的 .parentNode 。这必须是动态的，我认为解决方案必须朝这个方向发展。