Open and play various audio / video files in modal using [login to view URL] and foundation

Përfunduar Postuar 1 vit mё parё Paguhet në dorëzim
Përfunduar Paguhet në dorëzim

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 [login to view URL] 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:

[login to view URL]

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:

[login to view URL]

And Foundation Reveal for the modal (since the site is built on foundation):

[login to view URL]

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

JavaScript HTML5 jQuery / Prototip CSS HTML

ID Projekti: #35462167

Rreth projektit

7 propozimet Projekti në distancë Aktiv 1 vit mё parё

Është zgjedhur fitues:

darihol

❤️Hi there❤️ I have read your job carefully and am confident to deliver you a perfect result as I am an expert. Let’s discuss details over chat. Looking forward to hearing from you. Best regards!

$50 USD për 1 ditë
(12 Përshtypje)
4.7

7 profesionistë freelancer dërguan një ofertë mesatare prej $116 për këtë punë

yevheniikabanet3

Hello , I just read your job posting and it sounds like you need JavaScript, HTML5, HTML, jQuery / Prototype and CSS. I am a senior developer and have been working in this field 4+ years. I'm very interested in your jo Më shumë

$150 USD për 5 ditë
(1 përshtypje)
3.0
serhiikozyn

Dear client. I`m a full stack web developer with over 5 years hands-on experience and I`m specifically PROFICIENT in Javascript. Being prompt and punctual is the key point to makes me standing out and I can start work Më shumë

$150 USD për 3 ditë
(2 Përshtypje)
2.8