Angular ng-swipe with youtube iframe
<p>I'm trying to build simply slider with images and youtube videos. I want make it works fine on touch devices, so I want to use <code>ng-swipe-*</code> from angular's <code>ngTouch</code> module. Unfortunately swipe doesn't work over youtube's iframe. I tried to set lower <code>z-index: -10;</code>, but then I cannot play the video.</p>

<p>Do you have any idea how to solve this problem?</p>

<p>There is a snippet:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngTouch']);

app.controller('ctrl', function($scope) {
  $scope.msg = function(msg) {
    alert(msg);
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.ok {
  width: 300px;
  height: 100px;
  background: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.angularjs.org/1.4.8/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://code.angularjs.org/1.4.8/angular-touch.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="app"&gt;
  &lt;div ng-controller="ctrl" ng-swipe-right="msg('right')" ng-swipe-left="msg('left')"&gt;
    &lt;div class="ok"&gt;swipe works here&lt;/div&gt;
    &lt;div&gt;
      &lt;iframe width="300" height="200" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>(the best way to test it, is to run it in Chrome developer console and emulate on touch device)</p>