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 overe this?

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 overe this?

• javascript
• jquery
• iframe
• youtube
• youtube-api

Share Improve this question Follow edited Jan 28, 2015 at 19:27 JDillon522 asked Jan 27, 2015 at 21:48 JDillon522JDillon522 19.7k1515 gold badges5050 silver badges8282 bronze badges 1

• One thing you could do is position an empty <div> over the video. That should allow you to retain the swiping functionality. – soulprovidr Commented Jan 27, 2015 at 21:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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./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.

Its mandatory to include below attribute in URL.

rel=0&enablejsapi=1

Note: Go through ment 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 ment 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="slider">
    <div><img src="http://placekitten./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./embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
    </div>
    <div><img src="http://placekitten./500/480" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten./500/460" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten./500/440" alt="" width="500" height="400"></div>
    <div><img src="http://placekitten./500/420" alt="" width="500" height="400"></div>
  </div>
</div>