I forgot to add 2 lines in javascript file here is the updated javascript code : let videoList = document.querySelectorAll('.video-list-container .list'); videoList.forEach(vid =>{ vid.onclick = () =>{ videoList.forEach(remove =>{remove.classList.remove('active')}); vid.classList.add('active'); let src = vid.querySelector('.list-video').src; let title = vid.querySelector('.list-title').innerHTML; document.querySelector('.main-video-container .main-video').src = src; document.querySelector('.main-video-container .main-video').play(); document.querySelector('.main-video-container .main-vid-title').innerHTML = title; }; });
@MrWebDesignerAnas I want to find a way to use instead of tag but haven't found it yet. As when I click on the embed video it display at the same place not jump to the main video. Any possible ways to solve this?
First thanks for the source! Really helpful. I have one question: how to add subtitles for different videos in the list? If I add after tag for first clip, when I click second, third etc. it shows subtitles of the first. Thanks in advance!
Great playlist, thanks. One question. Most of the videos I post have a 1 -2 sec fade in so there is no image for the video in the playlist, only a black box. How can I replace the image the playlist takes from the beginning of the video, with a static jpg image?
Hello; I wanted to make a small addition to these codes, but I could not get out of it. Can you help me? Can the descriptions of the videos we upload be displayed in the space below, just like TITLE? I want it to give information about the video we uploaded with the tag. Each video will also change in the section below. I tried a lot, but when I make changes in JAVA, videos usually stop working. I would be very happy if you support me in this matter.
Hello; First of all, thank you very much for this useful work. I have a question. Can we make the first video, the main video file, start automatically? What code should we use for this? Thank you.
thanks sir How do I disable downloading at full screen On the computer, there is no download, but on mobile devices Do you have a code to cancel the download of the video
@@MrWebDesignerAnas you're right, yesterday I only saw the css classes and now I could see the full videos on my PC and I noticed the difference, good video bro keep it up :3
thank you so much! this helps me for final project. i've tried this code and it's all perfect but it seems like i couldn't click the video on the video playlist. it didn't come out on the main video container. does it have something to do with my js?
Hi mr web designer. I just wanted to ask. I did everything you did. But why when i click in the next videos nothing happens. I mean the same first video still running.
maybe because the class name you have written in your javascript does not matched to the html classes! try to download the source code to see what happened!
its simple use in your video list container for each video and hide in using display none in css and show it on the main video when click using the same method used for title in javascript! I literally forgot to add this in the video!
I have other suggestion use span tag in the video list and instead of adding description in the span use data-text attribute and write description inside the data-type example span data-type="this is my description" this way you won't have to hide span anymore and access that data-text using javascript same as title but use this .getAttrubute('data-text') for span!
I forgot to add 2 lines in javascript file here is the updated javascript code :
let videoList = document.querySelectorAll('.video-list-container .list');
videoList.forEach(vid =>{
vid.onclick = () =>{
videoList.forEach(remove =>{remove.classList.remove('active')});
vid.classList.add('active');
let src = vid.querySelector('.list-video').src;
let title = vid.querySelector('.list-title').innerHTML;
document.querySelector('.main-video-container .main-video').src = src;
document.querySelector('.main-video-container .main-video').play();
document.querySelector('.main-video-container .main-vid-title').innerHTML = title;
};
});
😮
Madrigal
@@Gacha_Hannas 😂
@MrWebDesignerAnas I want to find a way to use instead of tag but haven't found it yet. As when I click on the embed video it display at the same place not jump to the main video. Any possible ways to solve this?
Really satisfying design if i have software company i definitely hire you for your creativity
Wow, thanks
Seriously amazing 👏 I am definitely going to make this
🔥🔥🔥🔥
A superb explanation and excellent code, which worked without a hitch. Thankyou
Thanks mate! That was very kind and generous of you!
Really really awesome
First thanks for the source! Really helpful. I have one question: how to add subtitles for different videos in the list? If I add after tag for first clip, when I click second, third etc. it shows subtitles of the first.
Thanks in advance!
This is so amazing man, so helpful! Thanks so much for your contribution!
Its really help full sir. Thank you so much.
Glad to hear that
Very amazing 👏💫...
such amazing bro! thank you so much!
Awesome 😎
bu tasarimdaki gibi wordpreste nasil uygulayabiliriz, herhan bir bildiginiz eklenti var mi?
Mr. WD this is awesome, thank you very much.
welcome!
So beautiful
Thank you sir...
Great playlist, thanks.
One question. Most of the videos I post have a 1 -2 sec fade in so there is no image for the video in the playlist, only a black box. How can I replace the image the playlist takes from the beginning of the video, with a static jpg image?
Thank you so much…
You are welcome!
Thanks a lot.
Great job
big tahnks
Hello;
I wanted to make a small addition to these codes, but I could not get out of it. Can you help me? Can the descriptions of the videos we upload be displayed in the space below, just like TITLE? I want it to give information about the video we uploaded with the tag. Each video will also change in the section below. I tried a lot, but when I make changes in JAVA, videos usually stop working.
I would be very happy if you support me in this matter.
use the same method for descriptions as you are using for title.
I'll try soon to make another design like this but with the description as well.
@@MrWebDesignerAnas thank you so much
Cool 👍
Hello;
First of all, thank you very much for this useful work. I have a question. Can we make the first video, the main video file, start automatically? What code should we use for this? Thank you.
Do you have a video in which you do the same thing but the videos can be uploaded/deleted using php database?
thank you very much
how to make iptv Playlist Using HTML CSS & JavaScript?......
Thank you so much man
No problem
THANK YOU SO MUCH
You're welcome!
Awsome
1 comments. 1 first like 😁😅
Thank you so much :)
thanks sir
How do I disable downloading at full screen
On the computer, there is no download, but on mobile devices
Do you have a code to cancel the download of the video
very wonderful,.thank you
Thank you too!
Thanks 💝
thanks
Brother If I refresh the page I can not able to play other videos from the list. How to solve it?
you have to use localstorage for this or php is aslo a good solution but using localstorage to store video classname will be best in javascript
@@MrWebDesignerAnas brother, please try to make the same video in react when you will get time...we need it... really love your videos
hello sir i want to embed yt vidoes on this playlist how can i do this
just embed the link and give it the exact classname as used for the videos inside the video-container!
Wow thenks
Welcome
Could you please make website with Html css js php React my SQl
Hey, good video, but what is the difference with the video from 7 months ago?
totally different bro! the javascript code is more clear and simple unlike before and the source code is also given!
@@MrWebDesignerAnas you're right, yesterday I only saw the css classes and now I could see the full videos on my PC and I noticed the difference, good video bro keep it up :3
thank you so much! this helps me for final project. i've tried this code and it's all perfect but it seems like i couldn't click the video on the video playlist. it didn't come out on the main video container. does it have something to do with my js?
you have to write correct class name or tag name in js code
hi, how to add youtube video to this player? I will be very happy if you answer
cant u create code like this??? please 🙏🏻🙏🏻🙏🏻 i waiiit sirrrr ...please ❤️❤️❤️
thank you
You're welcome
Hi mr web designer.
I just wanted to ask.
I did everything you did.
But why when i click in the next videos nothing happens.
I mean the same first video still running.
maybe because the class name you have written in your javascript does not matched to the html classes! try to download the source code to see what happened!
Thank you sir ♥️
please I to know the name of your theme would like
nggak ada yang pakai
How can it be added to the site but can not watch until the payment is made
create 2 pages for this
1 with payment method page
2nd with video playlist
once user made their payment direct them to playlist page!
@@MrWebDesignerAnas thanks
i want to close icon download is okey?
well you can remove is it using javascript
@@MrWebDesignerAnas i help code Name Javascript Brother. thank.
courld you give us source code ?
Source code please sir
جيد ولكن كأنك لو تجعله يعمل بjson يكون أحسن اخصا للذين مثلي
I hope you complete my request.
youtube playlist
please give me your theme name i would like this....
laetus dark theme!
@@MrWebDesignerAnas Thank You so much Brother..
P
Expected an identifier and instead saw 'let'. let videoList = document.querySelectorAll('.video-list-container .list');
1
Stopping. (9% scanned). let videoList = document.querySelectorAll('.video-list-container .list');
ESLint (1)
1
ERROR: Parsing error: Unexpected token videoList let videoList = document.querySelectorAll('.video-list-container .list');
Why this problem?
And how to choose by default the first video from the list? So that the main video is not duplicated in the list.
How to make a full description under the video so that the description is not visible in the playlist?
its simple use in your video list container for each video and hide in using display none in css and show it on the main video when click using the same method used for title in javascript! I literally forgot to add this in the video!
@@MrWebDesignerAnas Happened! Thanks!
@@MrWebDesignerAnas I was able to hide the video description from the playlist title, but it doesn't show under the video.
I have other suggestion
use span tag in the video list and instead of adding description in the span use data-text attribute and write description inside the data-type example span data-type="this is my description" this way you won't have to hide span anymore and access that data-text using javascript same as title but use this .getAttrubute('data-text') for span!
Thanks😍
Welcome 😊