youtube - cannot swipe past iframe in carousel / s

Question

I have a responsive site with a carousel. The user can embed a youtube video as one of the slides. On desktop this works fine. On mobile however the iframe apparently eats all the swipe events and you cannot swipe past the video. We had to hack around this by substituting an image of the video and then using window.open() open a new window with the video.

It sucks.

Is there a good way to overcome this?

Answer 1

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.

$('.slider').click();
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');
    var iframeHeight=$('#videoSwipe').height()-40;
		var overlayHeight=$(document).find('.video-overlay');
		if ( overlayHeight.length >= 1 ) {
			overlayHeight.css('height', iframeHeight+'px');
 			}else{
			$('.youTubeVideo .tube').removeAttr( 'style' );
		}
  }
}

function onPlayerStateChange(e) {
  OverlayOnVideo(e.data);
}

$(document).on("click", ".video-overlay", function() {
  if (player) {
    player.playVideo();
    $('.youTubeVideo').find('.video').removeClass('video-overlay');
    $('.youTubeVideo .tube').removeAttr( '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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 tube"></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>

Answer 2

In short, I discovered I was doing it wrong.

The slider script works very well on both desktop. On mobile it works except you cant swipe past the iframe that embeds the video.

My example iframe is: <iframe width="1280" height="720" src="//www.youtube.com/embed/Lzbr6fPDmkE" frameborder="0" allowfullscreen></iframe> (fyi, its a funny video if you're an Army vet)

I discovered the (somewhat obvious) fact that youtube has a thumbnail url as well. So on mobile I add the following img tag:

<img src="http://i.ytimg.com/vi/Lzbr6fPDmkE/hqdefault.jpg" alt="1300x650" />

I found the answer in this article

The url I used is different than theirs because I ripped it off of an imbedded youtube thumbnail inside a gmail message.