API YouTube IFrame в Internet Explorer и Firefox

Больше "ответа", чем "вопрос", но не найдя его в другом месте, я размещаю его здесь.

У меня возникли трудности с инициализацией API iFrame во всех версиях IE и Firefox, с некоторой пользовательской реализацией. В принципе, он будет загружать API, но не будет создавать объект игрока.

После нескольких проб и ошибок я, наконец, понял, что он не работает, потому что идентификатор div, который я передавал объекту, имел видимость CSS, установленную на 'none'. Когда он был установлен в 'visible', все это сработало. После этого я попытался установить div CSS на 'display:none' (приложение потребовало, чтобы видео было скрыто до тех пор, пока пользователь не запросил его), что также вызвало отказ iFrame API молча (никогда не перезвонив 'onPlayerReady').

Короче говоря, при использовании API iFrame YouTube для инициализации на div, который вы хотите скрывать дольше, используйте технику CSS, такую как абсолютное позиционирование, чтобы вывести ее из экрана, пока вы этого не захотите. Также выяснилось, что после инициализации объекта игрока и вызова 'onPlayerReady' вы можете включать и выключать отображение в течение всего дня, и все будет работать, как ожидалось.

Ответ 1

Вы должны оставить пустой пул игрока, например.

<div class="myPlayerContainer"></div>

и когда вы хотите показать его, просто добавьте его в контейнер:

$('#showVideoBtn').click(function(){
    $('.myPlayerContainer').show().append('~ code of youtube iframe ~');
});

Ответ 2

Yotam прав, посмотрите на следующее:

HTML:

<button onclick="toggleYoutube();">show / hide</button>
<div id="youtube"></div>

JS (с использованием jQuery):

var visible = false;
function toggleYoutube() {
    visible = !visible;
    if ( visible ) {
        $("#youtube").append( '<iframe id="video" width="640" height="360" src="http://www.youtube-nocookie.com/embed/cjvIeNt93nc?rel=0" frameborder="0" allowfullscreen></iframe>' );
    } else {
        $("#video").remove();
    }
}

Смотрите полный код http://jsfiddle.net/wFVhT/2/