title: PhotoSwipe videos
body: <p>I want to add videos to my PhotoSwipe gallery.</p>
  
  <p>I read the documentation here:
  <a href="http://photoswipe.com/documentation/custom-html-in-slides.html" rel="nofollow">http://photoswipe.com/documentation/custom-html-in-slides.html</a></p>
  
  <p>Unfortunately, I don't get what this means:
  "If you really need to have video in PhotoSwipe, you may add it as modal
  that appears when user taps on current slide, you can dynamically create
  modal in DOM and append it after .pswp__scroll-wrap element."</p>
  
  <p>Has anyone been successful in making videos working reliably with PhotoSwipe?</p>
  
  <p><strong>Edit</strong>: I've tried this (last slide is a video): <a href="http://pixelkrams.de/2015/artspin" rel="nofollow">http://pixelkrams.de/2015/artspin</a> Works on desktop but breaks on mobile (video does not start and its size is wrong). 
  Relevant code: <a href="http://pixelkrams.de/js/main.js" rel="nofollow">http://pixelkrams.de/js/main.js</a></p>
  
  <p>Snippet from the PhotoSwipe initialization:</p>
  
  <pre><code>    // Pass data to PhotoSwipe and initialize it
      gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, dataLarge, options);
      gallery.init();
      gallery.listen('afterChange', function() {
          detectVideo(gallery);
      });
  
      gallery.listen('beforeChange', function() {
         removeVideo();
      });
     gallery.listen('resize', function() { 
         if ($('.videoHolder').length &gt; 0) updateVideoPosition(gallery);
     });
     gallery.listen('close', function() {
         removeVideo();
     });
  
     detectVideo(gallery);
  </code></pre>
  
  <p>and the relevant functions for video:</p>
  
  <pre><code>function removeVideo() {
      if ($('.videoHolder').length &gt; 0) { 
          if ($('#video').length &gt; 0) {
              $('video')[0].pause();
              $('video')[0].src = "";
              $('.videoHolder').remove();
              $('.pswp__img').css('visibility','visible');
          } else {
              $('.videoHolder').remove();
          }
      }
  }
  
  function detectVideo(gallery) {
      var src = gallery.currItem.src;
      if (src.indexOf('video')&gt;= 0) {
          addVideo(gallery.currItem);
          updateVideoPosition(gallery);
      }
  }
  function addVideo(item, vp) {
      var videofile = item.src.split(".");
      var v = $('&lt;div /&gt;', {
                  class:'videoHolder',
                  css : ({'position': 'absolute','width':item.w, 'height':item.h})
  
      });
      v.one('click touchstart', (function() {
          var playerCode = '&lt;video id="video" width="'+item.w+'" height="'+item.h+'" autoplay controls&gt;' +
          '&lt;source src="'+videofile[0]+'.mp4" type="video/mp4"&gt;&lt;/source&gt;' +
          '&lt;source src="'+videofile[0]+'.webm" type="video/webm"&gt;&lt;/source&gt;' +
          '&lt;/video&gt;';
           $(this).html(playerCode);
           $('.pswp__img').css('visibility','hidden');
  
      }));
      v.appendTo('.pswp__scroll-wrap');
  }
  
  function updateVideoPosition(o) {
      var item = o.currItem;
      var vp = o.viewportSize;
      var top = (vp.y - item.h)/2;
      var left = (vp.x - item.w)/2;
      $('.videoHolder').css({position:'absolute',top:top, left:left});
  
  }
  </code></pre>