title: Angular ng-swipe with youtube iframe
body: <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>