Iframe Video (Youtube) swipe

Question

Does anyone got an idea to handle an Iframe video/audio in a slider and get possibility to swipe it and still play it by clicking on it ?

I tried to put an overlay over the iframe and dispatch the event to the iframe but it doesnt seems to work :-/

Here is my previous attempt : http://codepen.io/Anddo0/pen/PwOWxZ

Js Part :

     var iFrameContainer = document.querySelector( '#iFrameContainer' );
     var overlay = document.querySelector( '#overlay' );

     if( iFrameContainer && overlay ){

        overlay.addEventListener( 'click', function(){
            console.log( 'Add event on Overlay' );
            // We transfer the event click to the iframe
            event.target.nextElementSibling.dispatchEvent( cloneMouseEvent( event ) );
        } );

        iFrameContainer.addEventListener( 'click', function(){
            console.log( 'Click in IframeContainer' );
        } );

    }

    function cloneMouseEvent( e ) {
        var evt = document.createEvent( "MouseEvent" );
        evt.initMouseEvent( e.type, e.canBubble, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget );
        return evt;
    }

html :

<div style='position: relative; height:300px; width:300px;'>

<div id='overlay' style='width:100%; height:100%; margin-bottom: 20px; height: 100%; position: absolute; overflow: hidden; z-index: 10;'></div>

<div  id='iFrameContainer' style="left: 0px; width: 100%; height: 100%; z-index:9;">

  <iframe allowfullscreen="true" frameborder="0" mozallowfullscreen="true" src="//www.youtube.com/embed/wTcNtgA6gHs?feature=oembed " style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" webkitallowfullscreen="true">
  </iframe>

</div>

Answer 1

You can try this solution, That's how I solved my problem.:

var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
        },
    });
    (function($) {
        jQuery(document).ready(function($) {
            swiper.on("transitionEnd", function(swiper) {
                var currentSlide, slideType, player, command;
                currentSlide = $('.swiper-container').find(".swiper-slide-active");
                previousSlide = $('.swiper-container').find(".swiper-slide-prev");

                slideType = currentSlide.attr("class").split(" ")[1];
                player = currentSlide.find("iframe").get(0);
                command = {
                    "event": "command",
                    "func": "playVideo"
                };
                if (player != undefined) {
                    player.contentWindow.postMessage(JSON.stringify(command), "*");
                }

                slideType = previousSlide.attr("class");
                if(slideType != undefined)
                {   
                    slideType = slideType.split(" ")[1];
                    player = previousSlide.find("iframe").get(0);
                    command = {
                        "event": "command",
                        "func": "pauseVideo"
                    };
         // If you don't using autoplay you should use "stopVideo" instead of "pauseVideo"
                    if (player != undefined) {
                        player.contentWindow.postMessage(JSON.stringify(command), "*");
                    }
                }
            });
        });
    })(jQuery);