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);

Answer 2

Thank you internet and thank you @halillusion. This made it work for me.

The iFrame:

<iframe allowfullscreen="" allow="autoplay" src="https://www.youtube-nocookie.com/embed/XXXXXXX?enablejsapi=1" tabindex="0"></iframe>

Important:

1. add allow="autoplay" to the iframe

2. add param "enablejsapi=1" to the youtube url so it responds to postMessage

               command = {
               "event": "command",
               "func": "playVideo" or "pauseVideo"
           };
   

   player.contentWindow.postMessage(JSON.stringify(command), "*");

Useful answer: https://stackoverflow.com/a/7513356

Answer 3

Its mandatory to include below attribute in URL.

rel=0&enablejsapi=1

Note: Go through comment lines and add those slider library files in head section and save it. once everything added you have to open the file in browser. You can able to see the slider. If find any issue please comment below.

Thanks, Anand VK

<!DOCTYPE html>
<html>
<head>
 <!-- Anand VK -->
 
 <!-- Jquery library -->
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 
 <!-- Please include below CDn in head section in html file -->
 <script id="iframe-demo" src="https://www.youtube.com/iframe_api"></script>
 
 <!--please inlcude Slick Slider CSS file here -->
 
 <!--Please include Slick Slider JS file Here  -->
 
 <style>
  .youTubeVideo{position:relative;}
  #wrapper{width: 30%; margin: auto;}
  .slick-list draggable{margin-top: 3%;}
  body{outline: none; background:black;}
  :focus{outline: none;}
  .slick-list.draggable{margin-top: 10px;}
 </style>
 
 
</head>

<body>
<div id="wrapper">
 <div class="slider">
  <div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
  <div class="youTubeVideo">
   <div class="video"></div>
   <iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
  </div>
  <div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
  <div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
  <div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
  <div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
 </div>
</div>
 <script type="text/javascript">
 <!-- Anand VK -->
   $('.slider').slick();
   var player;
   function onYouTubeIframeAPIReady() {
  player = new YT.Player('videoSwipe', {
   events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
   }
  });
   }
    
   function onPlayerReady(e) {
   $('.youTubeVideo').find('.video').addClass('video-overlay');
   }
   function OverlayOnVideo(playerStatus) {
   if (playerStatus == 2) {
   $('.youTubeVideo').find('.video').addClass('video-overlay');
    } 
   }
   
   function onPlayerStateChange(e) {
  OverlayOnVideo(e.data);
   }
   
   $(document).on("click", ".video-overlay", function(){
    if(player) {
    player.playVideo();
    $('.youTubeVideo').find('.video').removeClass('video-overlay');
    }
   });

 </script>
</body>
</html>

Answer 4

I just added another swiper over the middle of the iframe so the youtube controllers are still accessible, and used the swiper controller to sync the underlaying swiper: https://swiperjs.com/api/#controller