Показ YouTube відео вбудованого за допомогою iframe в модальному вікні

Показ YouTube відео вбудованого за допомогою iframe в модальному вікні

Нам, звісно ж, потрібна буде бібліотека jQuery і, оскільки модальні вікна ми самі робити не будемо бо ліниві, то візьмемо додаток до jQuery спеціально для цього створений. fancyBox версії 2! Завантажуємо звідси: https://github.com/fancyapps/fancyBox/zipball/v2.1.5. Розпаковуємо вміст архіву в каталог fancybox і додаємо потрібні для роботи плагіна файли (в тому числі і jQuery) в наш HTML документ:

<link href="/fancybox/source/jquery.fancybox.css" media="screen" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/fancybox/source/jquery.fancybox.js"></script>
<script src="/fancybox/source/jquery.fancybox.pack.js"></script>

Іще один скрипт для того щоб мати змогу використовувати YouTube Player API for iframe Embeds:

<script src="http://www.youtube.com/player_api"></script>

Файл jquery.fancybox.js і jquery.fancybox.css не мініфіковані тому, для економії і пришвидшення завантаження, можна зменшити їхній розмір скориставшись, наприклад, послугами сайту http://javascript-minifier.com/ і http://cssminifier.com/.

Наведу приклад тегу iframe з яким ми будемо працювати отриманого від YouTube:

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/bbEoRnaOIbs" width="560"></iframe>

До URL відео потрібно додати параметр enablejsapi=1. В даному конкретному випадку має вийти отаке:

<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/bbEoRnaOIbs?enablejsapi=1" width="560"></iframe>

Тепер настав час писати програму. Ідея полягає ось в чому: оскільки перехопити натиснення в межах документу всередині iframe ми не можемо, то будемо використовувати огидні "милиці" (як і в інших місцях процесу написання сайтів) для цього потрібно розмістити над всіма потрібними нам iframe теги div і прикріпити до них функції–обробники події "click". Теги div мають бути саме над тегами iframe тому для всіх div`ів задамо z-index рівний 2147483647. Для вирізнення потрібних нам тегів iframe серед інших додамо до них спеціальний CSS клас. В даному випадку клас буде мати назву play_youtube_videos_in_popup. Створимо функцію з назвою createDivOverlays яка буде створювати теги div і розміщувати їх над iframe з вказаним CSS класом. Код функції:

// змінна set$ містить огорнутий набір елементів
// відібраний функцією $(). Це зробить нашу програму більш гнучкою ніж якби
// ми просто прописали клас всередині функцї
function createDivOverlays(set$) {
    // для кожного елементу в огорнотому наборі
    set$.each(function() {
        var t$ = jQuery(this);
        // взяти координати тегу відносно
        // початку документу
        var ifrmeOffset$ = t$.offset();
        // URL відео на сайті YouTube
        var iframeSrc = t$.attr('src');
        // створюємо новий тег div
        var div = jQuery('<div>');
        // тег випалає з нормального потоку.
        // Це потрібно для позиціонування тегу
        div.css({
            position: 'absolute',
            'z-index': 2147483647
        });
        // для новоствореного тегу div
        // задати ті ж самі координати що й для iframe.
        div.offset(ifrmeOffset$);

        // просто задати ті ж самі координати для
        // div що й в iframe недостатньо.
        // Потрібно ще й задати розміри такі самі що й
        // в iframe. Таким чином div розтягнеться
        // для того щоб перекрити iframe
        div.innerHeight(t$.innerHeight());
        div.innerWidth(t$.innerWidth());

        // клас для того щоб пізніше додати
        // псевдоклас CSS hover
        div.addClass('div_under_y_video');
        jQuery('body').append(div);
        var iframeWidth = t$.attr('width');
        var iframeHeight = t$.attr('height');
        div.on(
            'click',
            function() {
                // посилається на поточний тег
                var t$ = jQuery(this);
                jQuery.fancybox({
                    'padding': 0,
                    'type': 'iframe',
                    'href': iframeSrc,
                    'height': '400',
                    'autoPlay': true,
                    'overlayShow': true,
                    'closeBtn': true,
                    'modal': false,
                    'openEffect': 'elastic',
                    // ось саме для цього нам і потрібен YouTube iframe API
                    // для запуску відтворення відео після відкриття
                    // модального вікна щоб користувачу не довелося 2 рази
                    // натискати кнопку
                    beforeShow: function() {
                        var id = jQuery.fancybox.inner.find('iframe').attr('id');
                        // Create video player object and add event listeners
                        var player = new YT.Player(id, {
                            events: {
                                'onReady': function(e) {
                                    e.target.playVideo();
                                }
                            }
                        });
                    }
                });
            }
        );
    });
}

І останні штрихи. jQuery код для вибору потрібних тегів, виклик створеної нами функції і додавання CSS для зміни вигляду вказівника мишки при наведення на div`и які перекривають iframe. jQuery код:

jQuery(window).load(function() {
    // можна приховати теги з вказаним класом  до завершення завантаження
    // потрібних елементів для того щоб користувач не міг натиснути на вбудоване відео
    // і таким чином зламавши наші "милиці"
    jQuery('.play_youtube_videos_in_popup').show();
    createDivOverlays(jQuery('.play_youtube_videos_in_popup'));
});

І визначення CSS класу div_under_y_video

<style type="text/css">.div_under_y_video:hover{cursor:pointer;}</style>