Open and play various audio / video files in modal using plyr.js and foundation
Budget: $30 – $250 USD
I have a grid of audio files and youtube videos. These will be represented in the grid as images, when user clicks on an image, it should load a modal (using foundation reveal modal) and AUTOPLAY the selected audio or video.
When user closes the modal (this is already a callback in the js provided below and I put in a console.log to show where), any playing audio/video should stop.
If user then clicks on a new audio or video the modal should open with new audio / video playing.
A basic skeleton example is here with just a few files for reference / testing:
https://codepen.io/rliverman/pen/OJEqrwm
Note: the real site will have 20-30 random files, so I want to build and destroy the modal on click, not create 30 modals on page load.
Using PLYR to handle audio / video controls:
https://github.com/sampotts/plyr
And Foundation Reveal for the modal (since the site is built on foundation):
https://get.foundation/sites/docs/reveal.html
In the example I provided I swapped out the SRC using JS grabbing a data attr of the clicked item. I think there are better ways to initialize plyr within the modal based on what the user clicks.
I also couldn't get the items to stop and need to get the audio player loading in the modal if audio is selected. I have 2 modals but could easily just be one modal template if that's all that is needed.
NOTE: It looks like codepen will not play youtube videos at all, so might be easier to grab the code and put on a dev server for testing play / pause.
You may nee
When user closes the modal (this is already a callback in the js provided below and I put in a console.log to show where), any playing audio/video should stop.
If user then clicks on a new audio or video the modal should open with new audio / video playing.
A basic skeleton example is here with just a few files for reference / testing:
https://codepen.io/rliverman/pen/OJEqrwm
Note: the real site will have 20-30 random files, so I want to build and destroy the modal on click, not create 30 modals on page load.
Using PLYR to handle audio / video controls:
https://github.com/sampotts/plyr
And Foundation Reveal for the modal (since the site is built on foundation):
https://get.foundation/sites/docs/reveal.html
In the example I provided I swapped out the SRC using JS grabbing a data attr of the clicked item. I think there are better ways to initialize plyr within the modal based on what the user clicks.
I also couldn't get the items to stop and need to get the audio player loading in the modal if audio is selected. I have 2 modals but could easily just be one modal template if that's all that is needed.
NOTE: It looks like codepen will not play youtube videos at all, so might be easier to grab the code and put on a dev server for testing play / pause.
You may nee