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

Job Description:

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

Taidot: JavaScript, HTML5, jQuery / Prototype, CSS, HTML

Tietoa asiakkaasta:
( 12 arvostelua ) Richmond, United States

Projektin tunnus: #35462167

Myönnetty käyttäjälle:


❤️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 1 päivässä
(12 Arvostelua)

7 freelanceria on tarjonnut keskimäärin $116 tähän työhön


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 Lisää

$150 USD 5 päivässä
(1 arvostelu)

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 Lisää

$150 USD 3 päivässä
(2 arvostelua)