Добавление HTML вокруг видео мешает работе Vimeo API - PullRequest
Новая
       6

Добавление HTML вокруг видео мешает работе Vimeo API

1 голос
/ 11 февраля 2012

У меня есть страница на сайте, и в блоках есть несколько видео. Когда я проигрываю одно видео, а затем нажимаю кнопку закрытия или нажимаю на другое поле, чтобы открыть его, все работает отлично. Но проблема возникает, когда я добавляю дополнительную 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');
             //} 
        });
    }
})();

Это работает просто отлично, но когда я добавляю дополнительный <div> вокруг iframe (а мне это действительно нужно), он больше не работает.

Есть подсказка?

РЕДАКТИРОВАТЬ: проблема более сложная, я добавил теги <ul> и <li> вокруг фреймов как таковые: 

<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

и у меня все получилось.

Проблема в том, что я использую теги <ul> и <li> для вызова jcarousel и добавляет дополнительные 3 деления между моими .exandable-vids-container и <ul>. Более того, иногда я буду называть эту карусель, а иногда нет, поэтому я действительно не могу добавить дополнительные 10 * в js. Это должно быть динамично, и я думаю, что решение должно быть в этом направлении.

...