Create A Responsive Popup Video Gallery Using HTML CSS And Vanilla Javascript

[@vikrambais4885]

one like for splendid work.. because of this i got alot of help in my project...

[@aichan8730]

much loooove ❤❤❤❤

[@ozodbekboriboyev1010]

Thank you a lot. You helped to solve my problem! God bless you 🙏

[@MrWebDesignerAnas]

welcome!

[@DaudiNungwana]

hey GUYS, here is the script to disable the video from playing in the background
document.querySelectorAll('.video-container video').forEach(vid => {
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src');
}
});
document.querySelector('.popup-video span').onclick = () => {
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').pause(); // add this code
}

[@phaews]

Thanks! You are a hero S2

[@커피와초콜릿은애증]

Thank you!!!

[@claucad52]

Gracias! Obrigado! Thanks you! Arigato!🤗🤗🤗🤗🤗🤗

[@hadinazar367]

big W

[@therockinist9586]

thank you

[@jnd6807]

Wonderful so educational

[@karnatakashushma4788]

Your videos are really awesome 🔥.

[@naugustus939]

Awesome tutorial. I really appreciated this. Question : How would you go about making it so after you open the video, you can click anywhere outside of the video to close it as opposed to only clicking the X to escape?

[@ritikasaini629]

Great😎

[@exodusmediasg]

Thank you for porviding this tutorial and many others on your channel. Appreciated

[@jackotex6205]

Nice Video! How can I pause the music after closing the video when working with ? I embedded a video from TH-cam

[@furkanesen8429]

Yes. I cant. How can I pause the music ??

[@yusufsabr2288]

@@furkanesen8429 hocam çözdün mü ya kafayı yedim çözemedim

[@sumondatta3440]

boss you are great❤

[@thomdraw7933]

When I click on the video to see it in the popup, the src is not updated according to the video but stays at "null" do you know what I can do?

[@invisibletechnician8732]

How to upload new post this site.

[@MrWebDesignerAnas]

this is the advance version of this video but you can upload it from here :
th-cam.com/video/wvu37Ze0HmE/w-d-xo.html

[@MrAkalp]

when i m click on any image to play video, video is playing but left side bottom position not playing like u show in popup in centre, plz help me

[@together-goodstuffhappens8205]

Thankyou for your great video Mr Web Designer, just what I am looking for.
Could you PLEASE help me with the close button of the popup not stopping the audio from playing after closing.
I note your earlier reply of using
closeVideo.onclick = () =>{
mainVideo.pause();
}
I have tried to add this to the code but not having any luck. Can you please advise the line number and is it in the INDEX or CSS file and the exact code and where to put this code to make this work.
Thankyou for your help in advance.🙂

[@DaudiNungwana]

hey here is the script to disable the video from playing in the background
document.querySelectorAll('.video-container video').forEach(vid => {
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src');
}
});
document.querySelector('.popup-video span').onclick = () => {
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').pause(); // add this code
}

[@hammad4513]

@@DaudiNungwana Need One More Help Bro... As I Am Refershing The Page It Showing Video Again Without Clicking On It..

[@DaudiNungwana]

@@hammad4513 I think its just something on your code. Just check it line after line, word after word. I will send you my entire CSS code as well and the container markup.

[@together-goodstuffhappens8205]

@@DaudiNungwana Thankyou so much for your help....all fixed and working just fine. Thanks again

[@DaudiNungwana]

@@together-goodstuffhappens8205 glad I was of help.

[@FidelEmilioSusanaJimenez]

👽😍😍

[@fajarsaputra4si502]

Thanks For Tutor Sir

[@sabrinasung1618]

hi my video is working fine but after closing the video the sound is still playing how to fix this?

[@MrWebDesignerAnas]

are you using opacity:0 or display:none property to hide video?

[@Jesusworshipsongs-robbie]

@@MrWebDesignerAnas Thanks for an excellent video. Using display: none in javascript

[@justein2334]

@@MrWebDesignerAnas same issue, I did exactly what you did

[@suhailnexgeno]

Thank you my bro

[@superAbtruse503]

how do i add border to the span? I set the background as white, so that the border is no really visible

[@thinguyeninh2028]

so cool bro, tks

[@trunglekien8217]

you're really fanstatic

[@aniketashokbhise]

😍😍😍

[@ZUOSLP]

Really cool video. I have a question: Can we use this method work with youtube videos?

[@MrWebDesignerAnas]

Yes you can!

[@bekisahmet2326]

thank you so much

[@renkselalbumtasarm3597]

It would be nice if you give the direct source codes. Our goal is just to add it to our site quickly and easily.

[@moobonhoe8566]

agree @Mr. Web Designer

[@Axel-Ehh]

can you put like text or descriptions on each class or of what you are doing

[@edbertcadavero14]

works great but when i closed the popup video. the sound is still playing in the background.

[@yusufsabr2288]

yes yes yes, could you fix the problem????

[@michaeljohnaprahamian4346]

Ive gotten everything on this perfect but the span x button wont close the pop up video, i dont know what im doing wrong

[@MrWebDesignerAnas]

check the javascript code! the classname should be correct

[@benjamindame3879]

I tried your code but the foreach code in the Java script is not working, same video will popup even when I clicked the other one, then if I clicked the X button the video will still play

[@dinai342]

const video = document.querySelectorAll(".video-container video");
const popup = document.querySelector(".popup-video");
const popupVideo = document.querySelector(".popup-video video");
const close = document.querySelector(".popup-video span");
video.forEach((vid) => {
vid.onclick = () => {
popup.style.display = "block";
popupVideo.src = vid.getAttribute("src");
};
});
close.onclick = () => {
popup.style.display = "none";
popupVideo.pause();
popupVideo.currentTime=0;
};

[@benjamindame3879]

@@dinai342 I already figured it out last year

[@snaqvi009]

HI, Great tutorials.
How to add titles and tags with same responsive design ?
Thanks

[@MrWebDesignerAnas]

might this help you : th-cam.com/video/YZLuBdYgDsA/w-d-xo.html

[@FarbilGaming]

Thank you!
But I have a question, how can I add a title under the video?

[@FarbilGaming]

Is there a contact to ask?

[@salvaravens]

it`s possible to create this popup with s?

[@MrWebDesignerAnas]

yeah sure!

[@salvaravens]

@@MrWebDesignerAnas i've tried replacing the "video" tags with "" but the popup doesn't open when clicking the videos.

[@Raidoven]

great tutorial! unfortunately videos hosted on youtube dont allow for direct access to their mp4 link. Do you know how i can design something like this but with the youtube embedded player?

[@Ro_V_oR]

It's best to use an to do that

[@gousiyaart2515]

Assalamualaikum
Brothers e-commerce product image description hiden
Main image on click after open description
Please reply

[@DreysyPG]

I loved the video, sorry, an error occurs to me, I can't close the video, the X doesn't work.
I am using , but it doesn't close the videos.
Could you help me please.🥺

[@MrWebDesignerAnas]

write the exact javascript code as shown in the video with exact classes name and tags

[@OdhavSoftech]

js is not working...plz help

[@sangarstudio6435]

I don't know how to thank you 😍

[@ideiasderendaextraoficial]

ty

[@apnacoding3798]

काय विडीयो बनवलेत हो खूपच छान 🙏
Sir all video name kye ahet ho sangal kye mala

[@MrWebDesignerAnas]

????

[@apnacoding3798]

@@MrWebDesignerAnas
Sir mala tumhi video download kele tyanche name sanga sir

[@estheror3027]

hey sir, great video! after closing the video, it doesn't pause. can you type the pause command here? thanks!!!

[@MrWebDesignerAnas]

closeVideo.onclick = () =>{
mainVideo.pause();
}

[@together-goodstuffhappens8205]

@@MrWebDesignerAnas Fantastic video....just what I am looking for, I do not have a lot of experience with coding....I am having the same problem as Esther above, and I am not sure where to put the code you have suggested. Can you please elaborate and advise the line number on either the CSS or INDEX file and exact code that I need to use to make this work. Your help is most greatly appreciated. Thanks for helping everyone with the services you provide. Many thanks.🙂

[@None-code-02]

@@MrWebDesignerAnas where should I place this code sir

[@bimaltwayana2058]

where is the audio for description?

[@salvaravens]

Hi, thanks for the tutorial!! When i click on a video it pops up but without showing the video, only a gray rectangle, and it only plays the small sized one.

[@MrWebDesignerAnas]

did you write the exact code shown in the descriptions?

[@salvaravens]

@@MrWebDesignerAnas yes, i even rewrote it a couple of times to make sure it was exactly the same..

[@salvaravens]

Now its working! but when i close the popup video with the X the audio keeps playing without the video.

[@MrWebDesignerAnas]

@@salvaravens use a javascript function called paused() on video selector in javascript!

[@salvaravens]

@@MrWebDesignerAnas after trying several times, it worked!! thanks!!!

[@programmingwithkartik4319]

Konse theme hai ye vs code me

[@MrWebDesignerAnas]

leatus dark theme

[@manhtganf]

how to upload wizard ??? Please tutorials

[@BuffaloBlack]

Why is it so hard to share the source code? It literally takes 2 seconds compared to all the time you spent recording yourself coding and uploading this video.

[@bimaltwayana2058]

please share the code..

[@concretefist5672]

bro why you dont copy the full code somewhere you dont explain what you are doing anyway

[@abdellahidalioua9611]

Source code please

[@hafezagina]

could you please upload the code to buy a coffee?

[@MrWebDesignerAnas]

I'll try to make even a better version of this code in the future and provide it for free

[@hafezagina]

@@MrWebDesignerAnas can I please have the current version? I need it for your Tour and Travel website as soon as possible please! Please let me know how I can get in touch with you as I need further help editing and developing the website. I can pay and requirements

[@viane123456]

can you give source/

[@sangarstudio6435]

Sourse code please

[@joseW418]

Upload here the code Bro🙏😍

[@mariel7388]

Pls give code

[@Ava-23]

source code please

[@MrWebDesignerAnas]

in the description if not found there's an another video gallery website with source code

[@syediqbalahmed3176]

vola ... ocay ...

[@VicenteCarlosFernandes]

The only way that it works for me:
document.addEventListener('DOMContentLoaded', () => {
const videos = document.querySelectorAll('.video-container video');
const holder = document.querySelector('.popup-video video');
videos.forEach (vid => {
vid.onclick = function( el) {
let src = el.target.getAttribute('src');
holder.setAttribute('src', src);
document.querySelector('.popup-video').style.display = 'block';
}
});
document.querySelector('.popup-video span').onclick = () => {
const mdsrc = document.querySelector('.popup-video video');
mdsrc.pause();
mdsrc.currentTime = 0;
document.querySelector('.popup-video').style.display = 'none';
}
});