photoswipe-video-service-plugin Release

[rsd]

Hello,

I just release a photoswipe-video-service-plugin to be able to use youtube and vimeo videos.
I based on the video plugins, hoewever I am sure there is a lot of ways to improve it.
The only examples I found before it was jquery based for 4.x.

https://github.com/rsd/photoswipe-video-service-plugin

• rsd

[acwolff]

I tried to test your plugin without succes.

I do not use npm but used the zip file to get your files.

I saved file PhotoSwipeVideoServicePlugin.js in the same directory as used for file photoswipe-lightbox.esm.min.js'
and use at the end of the main file index.html file this code:

<script src="res/photoswipe/PhotoSwipeVideoServicePlugin.js"></script>

I used this code in my initGallery.js file in my res directory:

   import PhotoSwipeLightbox from './photoswipe/photoswipe-lightbox.esm.min.js'; 
   import PhotoSwipeVideoServicePlugin from './photoswipe/PhotoSwipeVideoServicePlugin.js';

but this code is not working.

It is also not working if I use this line as reported in your documentation.

import PhotoSwipeVideoServicePlugin from 'photoswipe-video-service-plugin';

So what are I am doing wrongly?

Without your code the page works correcty with my own implementation as you can see here:

https://andrewolff.jalbum.net/TestVideos_PS/

[rsd]

Thank you for your feed back.

I created esm bundles that were not built and a standalone html version that works without npm (still need to correct the paths) to help as demo/src/standalone-example.html:

<link rel="stylesheet" href="../../node_modules/photoswipe/dist/photoswipe.css">
<script type="module">
    import PhotoSwipe from '../../node_modules/photoswipe/dist/photoswipe.esm.js';
    import PhotoSwipeLightbox from '../../node_modules/photoswipe/dist/photoswipe-lightbox.esm.js';
    import PhotoSwipeVideoServicePlugin from '../../dist/photo-swipe-video-service-plugin.esm.js';

    document.addEventListener('DOMContentLoaded', () => {
        const lightbox = new PhotoSwipeLightbox({
            gallery: '.photoswipe-wrapper',
            children: '.photoswipe-item a',
            pswpModule: () => PhotoSwipe,
        });

        new PhotoSwipeVideoServicePlugin(lightbox, {
            youtubeAttributes: {
                autoplay: false,
            },
            vimeoAttributes: {
                autoplay: false,
            },
            playOnActivate: true,
        });

        lightbox.init();
    });
</script>

[acwolff]

Well with the esm modules, this code is accepted:

 import PhotoSwipeLightbox from './photoswipe/photoswipe-lightbox.esm.min.js'; 
 import PhotoSwipeVideoServicePlugin from './photoswipe//photo-swipe-video-service-plugin.esm.js';`

However, it still does not work at my place, see the last two thumbnails in this album:
https://andrewolff.jalbum.net/TestVideos_PS-plugin/

With the F12-key you can investigate my code, I use a code like:

    <!-- YouTube Video -->
<a id="s5" href= "https://www.youtube.com/embed/QbULyApj9Sw"   data-type="youtube" data-photodata= '' data-caption='YouTube video  with plugin<br>'>
<div class="box video"  style = "width:120px">
<img src="slides/www.youtube.com-363%20-%20copy.jpg" class="video" width="120" height="56" alt="YouTube video" title="YouTube video"  ><br>
<div class="thumbText">YouTube video  with plugin </div>
  <span class="video-icon">
      <img src="res/video-icon.svg" alt="Video">
  </span>
</div>
</a>

I can't run your local demo without npm.

Why do you not give a link to a website which shows your implementation?

[rsd]

The attributes should be prefixed with data-pswp-.

Update the examples in the new release.

[acwolff]

Thanks, I have now a working version, see here: https://andrewolff.jalbum.net/TestVideos_PS-plugin/

This works fine on my PC, but on my iPhone the image is far too large., because the width and height are in pixels, which is not responsive.
I tried to use a width of 90%, but that did not work.
What should I do to get also on my iPhone an acceptable video size?

Another problem are the missing video controls (start/stop, sound on/off, sound volume), so you can't stop the video. Compare this with my implementation in thumbnails 4 and 5,

I use for the last thumbnail this code:

<a id="s6" href= "https://player.vimeo.com/video/74152497"    data-pswp-type="vimeo"
data-pswp-width="1920" data-pswp-height="1080"
	data-photodata= ''
data-caption='Vimeo video with plugin<br>'>
<div class="box video"
 style = "width:120px">
<img 
src="slides/player.vimeo.com-803%20-%20copy.jpg" class="video" 
width="120" height="62" alt="Vimeo video" title="Vimeo video"  ><br>
<div class="thumbText">Vimeo video with plugin
</div>
  <span class="video-icon">
      <img src="res/video-icon.svg" alt="Video">
  </span>
</div>
</a>

I repeat my last question in my previous reply:

Why do you not give a link to a website which shows your implementation?