Create A Responsive Video Playlist Gallery Using HTML - CSS - Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น • 247

  • @brajrajdevda7344
    @brajrajdevda7344 8 หลายเดือนก่อน +1

    Awesome video 📸 helping

  • @kalyankp2328
    @kalyankp2328 2 หลายเดือนก่อน

    Keep up the good work. It's really helpfull.

  • @burgasHoH
    @burgasHoH 3 ปีที่แล้ว +2

    Cool background song and video man :)

  • @eduardoeltortuga
    @eduardoeltortuga 2 ปีที่แล้ว +3

    Thanks for the great video! I've been trying to find a player like this for over a year.

  • @nasrmustofa5812
    @nasrmustofa5812 2 ปีที่แล้ว

    Shukren habibi☺️

  • @howardanddennis1776
    @howardanddennis1776 3 ปีที่แล้ว +7

    Excellent. taught me a lot and made it so simple, yet thorough. Thank you very much.

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  3 ปีที่แล้ว +1

      You're very welcome!

    • @howardanddennis1776
      @howardanddennis1776 3 ปีที่แล้ว

      Is there a way to autoplay the videos in the list when one is finished playing?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  3 ปีที่แล้ว

      use 'loop' attribute for video tag

    • @howardanddennis1776
      @howardanddennis1776 3 ปีที่แล้ว

      @@MrWebDesignerAnas hello I inserted loop in video tag but it just loop the current video being played. Can you give me a suggestion on where and how I should put this. Thank you in advance

    • @mediatorxavier5116
      @mediatorxavier5116 2 ปีที่แล้ว

      Sir make with auto detect from database

  • @sumanshuborkar5788
    @sumanshuborkar5788 2 ปีที่แล้ว

    aatishay khol aani sadha aasa ha video pahun mala khup kahi shikaila midale .... thank you.

  • @munnakha170
    @munnakha170 3 ปีที่แล้ว +1

    You deserve 1 million subscribe

  • @davidnkana5314
    @davidnkana5314 3 ปีที่แล้ว +2

    You are a genius

  • @joseloyola2242
    @joseloyola2242 ปีที่แล้ว

    Thanks! I've followed along and learned quite a lot, subscribed

  • @Radhakrishn808
    @Radhakrishn808 3 ปีที่แล้ว

    Suprrr bhai ❤️❤️❤️❤️❤️

  • @CarlosDanielACh
    @CarlosDanielACh ปีที่แล้ว +1

    Se puede hacer con videos de TH-cam, es decir que no estén en la carpeta local sino mediante la URL del vídeo en TH-cam

  • @ibrahimadjilla1849
    @ibrahimadjilla1849 9 หลายเดือนก่อน

    great job

  • @mimundosad265
    @mimundosad265 วันที่ผ่านมา

    y por ejemplo si yo use en vez de un title use un button, como puedo hacer para que aparezca el nombre del boton abajo del video

  • @leslievelvy
    @leslievelvy 9 หลายเดือนก่อน

    thank you so much for this omg it's was easy to follow thank you again!!

  • @byronloarte
    @byronloarte 3 ปีที่แล้ว +1

    I like the short videos, are very interentings and awesome

  • @bangrulzz44
    @bangrulzz44 ปีที่แล้ว

    How do you do it if you want to add text under header 3 (h3) like the TH-cam description?

  • @sino4330
    @sino4330 ปีที่แล้ว

    Thank u every much for your help!! You save me with my project!!!!

  • @TuệTâm-j8h
    @TuệTâm-j8h ปีที่แล้ว

    You save me, thanks u so much! Have a good day!

  • @JulianCodeLab
    @JulianCodeLab ปีที่แล้ว +6

    Lo acabo de hacer y la verdad es uno de los más completos que he visto hasta ahora, sería genial si nos puedes enseñar como ponerle el progreso a cada video.

    • @ElliotSpivot
      @ElliotSpivot 3 หลายเดือนก่อน

      Aún tienes el código copiado? I need!

  • @Mahadev-x7u
    @Mahadev-x7u 3 ปีที่แล้ว +1

    Awesome lesson... Thank you. Keep going

  • @cybersaintzero8490
    @cybersaintzero8490 3 ปีที่แล้ว

    A great job outlining this process!!!

  • @adityabajpai2230
    @adityabajpai2230 9 หลายเดือนก่อน

    Very Useful, I thought i won't get the video for playlist....

  • @bobjoejack
    @bobjoejack 8 หลายเดือนก่อน

    can you use videos from other sources? or they need to be uploaded to the CMS? for exmaple, can I use a youtube link as the video source? it doesn't seem to use the regular youtube link or the embed link properly

  • @elvis_matus
    @elvis_matus 3 ปีที่แล้ว +1

    Congratulations and thank you. Your video has helped me a lot

  • @tjeugeelen4167
    @tjeugeelen4167 2 ปีที่แล้ว +2

    I tried to recreate all the code but my script is not working . I have only one big player with video 1 playing. All small icons and titles are below ( not flex) and clicking them does not change the active state nor plays that movie. I must have made an error in retyping the code.
    Where can I get the entire code for HTML page and css page?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว +1

      sorry for the inconvenience I'll make another video related to this with better version and even provide source code!

    • @tjeugeelen4167
      @tjeugeelen4167 2 ปีที่แล้ว

      This layout is perfect for off-line study CD's I create for Malawi students

  • @eufaelvieira
    @eufaelvieira 4 หลายเดือนก่อน

    Thanks! Muito obrigado, este vídeo me permitiu resolver uma pendência em um projeto! Obrigado!

  • @amosdeazeewillie
    @amosdeazeewillie 3 ปีที่แล้ว

    I love this video background music

  • @-Estrada-
    @-Estrada- 3 ปีที่แล้ว

    Wow good video , i learn too much whit You , tanks from México.

  • @mohammadmeraj40
    @mohammadmeraj40 6 หลายเดือนก่อน

    Thanks so much bro ❤❤❤❤

  • @jamijordan1009
    @jamijordan1009 2 ปีที่แล้ว +2

    There always seems to be something that doesn't work right correctly that causes the project to mess up in his videos.. Why don't I see the html, css con collumns open on the side panel so we can see exactly which files are being used ? no link to the source code either? hmm What is the reason for this sir?

  • @kbmohamed1
    @kbmohamed1 8 หลายเดือนก่อน

    very usefull, thanks

  • @akshdeepsingh9476
    @akshdeepsingh9476 2 ปีที่แล้ว

    now a learn one more project form you thx bro :)

  • @mdfoisal4493
    @mdfoisal4493 3 ปีที่แล้ว

    Wow, thank you guys, great job.

  • @pealee2354
    @pealee2354 2 ปีที่แล้ว

    Thanks a lot for video

  • @lfflorez7
    @lfflorez7 ปีที่แล้ว

    no publico el codigo de ejemplo, lo hice y no me funciono, sera que hay algo mal?

  • @mi.altair92
    @mi.altair92 5 หลายเดือนก่อน

    crack buen trabajo, pero te falto un detalle.
    Las canciones no se pasan solas.
    Cuando termina una tienes que reproducir otra manualmente.

  • @yeasinarafat1694
    @yeasinarafat1694 3 ปีที่แล้ว

    Nice video

  • @jmoficialpro
    @jmoficialpro 2 ปีที่แล้ว

    estoy intentnado hace este reproductor no funciona en la actualidad ? por que no me selecciona otro cuando le doy click

  • @ElliotSpivot
    @ElliotSpivot 3 หลายเดือนก่อน

    Where can I find the ready-made code?

  • @eueudruadh2268
    @eueudruadh2268 2 ปีที่แล้ว

    😭😭😭😭 Thanks for the video, i search this for a long time.

  • @riaddjaid7428
    @riaddjaid7428 ปีที่แล้ว

    what about using json file to stock videos paths where can i find more about this please ?

  • @yanderezaf
    @yanderezaf ปีที่แล้ว

    thank you! i used this one and it's work!

  • @amirz5028
    @amirz5028 2 ปีที่แล้ว

    best

  • @ronelysonicemotalora715
    @ronelysonicemotalora715 2 ปีที่แล้ว +1

    buenisimo

  • @vanhaipham8291
    @vanhaipham8291 ปีที่แล้ว

    when i maked the js code i had a problem like this:
    Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    at video.onclick ((index):88:33). please teach how to fix it. thanks !

  • @tainuth
    @tainuth ปีที่แล้ว

    very helpful😍 Thank you so much😁

  • @andersonhenrique9967
    @andersonhenrique9967 3 ปีที่แล้ว +2

    Muito obrigado, aprendi muito!

  • @javadamin1750
    @javadamin1750 2 ปีที่แล้ว

    Excellent , thank you so much

  • @YashuaD
    @YashuaD 2 ปีที่แล้ว +1

    Se puede hacer lo mismo pero con links de videos ?

  • @hassaantahir3861
    @hassaantahir3861 3 ปีที่แล้ว

    Noice. Brooo 🎉

  • @touco10
    @touco10 3 ปีที่แล้ว

    thank you from france .it s was i m looking for

  • @abeflix
    @abeflix ปีที่แล้ว

    is it posibble for video? i cuz just embedded movie series video then there are alots of episodes.

  • @ShubhamKumar-et7gx
    @ShubhamKumar-et7gx 2 ปีที่แล้ว

    bro insted of that videos can i want to put youtube videos/yt playlist instead of that videos.. so how can I do this ?? please help me reply soon

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว +1

      well! you can use the tag to add youtube videos link or you can add source code in the video src attribute and give the exact class name i.e. .video

    • @ShubhamKumar-et7gx
      @ShubhamKumar-et7gx 2 ปีที่แล้ว

      @@MrWebDesignerAnas can I use like this

  • @BMSS7
    @BMSS7 2 ปีที่แล้ว

    after i code curser: pointer , i can not get hovering curser on video what is my problem

  • @iarghya
    @iarghya 3 ปีที่แล้ว +1

    Amazing 👍

  • @ZipLord24
    @ZipLord24 ปีที่แล้ว

    So what happen when i click go back previous page?

  • @AllyDevDroid
    @AllyDevDroid 2 ปีที่แล้ว +1

    Por favor, da para colocar o link o modelo do script aqui no canal em txt?

  • @japhethngugi3700
    @japhethngugi3700 3 ปีที่แล้ว +1

    Gret work....

  • @dharmeshshrivastava6714
    @dharmeshshrivastava6714 2 ปีที่แล้ว

    What we need to do if videos are of big size let's say 4GB each?

  • @leo-teck
    @leo-teck 2 ปีที่แล้ว

    how can make a video from pixabay to mp4 format

  • @BuffaloBlack
    @BuffaloBlack ปีที่แล้ว

    When you click off the main video it disappears and won't reappear in the gallery list.

  • @Resiliencebalado
    @Resiliencebalado 2 ปีที่แล้ว

    Thank you very much! I'm pretty new to HTML/CSS/JS. Just one detail, I try to do this with embed video. All the video are add on my page, the only thing, is they don't get in the grid like yours do. Do I have to add other code to it or is it just something that I've mistyped?
    Thanks!

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว +1

      give each video a similar classname and apply grid style in css

    • @Resiliencebalado
      @Resiliencebalado 2 ปีที่แล้ว

      @@MrWebDesignerAnas thanks! Will try that!

  • @hamoonhamoud6917
    @hamoonhamoud6917 3 ปีที่แล้ว

    Javascript link on title don't work show each?

  • @digitalhdr7768
    @digitalhdr7768 3 ปีที่แล้ว

    nice

  • @lezzzedd591
    @lezzzedd591 3 ปีที่แล้ว +1

    why it doesn't play when i clicked on other videos?? it just stays on the main video

    • @yashmahajan2140
      @yashmahajan2140 3 ปีที่แล้ว

      Same problem I'm facing...

    • @lezzzedd591
      @lezzzedd591 3 ปีที่แล้ว

      @@yashmahajan2140 are u using repl too??

    • @yashmahajan2140
      @yashmahajan2140 3 ปีที่แล้ว

      @@lezzzedd591 no.. sublime

    • @lezzzedd591
      @lezzzedd591 3 ปีที่แล้ว

      @@yashmahajan2140 did you find any solutions?

    • @yashmahajan2140
      @yashmahajan2140 3 ปีที่แล้ว

      @@lezzzedd591 nah... Waiting for the reply from uploader

  • @nontechbg
    @nontechbg 3 ปีที่แล้ว

    Impressive 👍👍

  • @raidynamics
    @raidynamics ปีที่แล้ว

    perfect!

  • @sumitpawar1429
    @sumitpawar1429 3 ปีที่แล้ว

    Thank you so much sir!

  • @respectin
    @respectin 2 ปีที่แล้ว +6

    Hey this is great
    Can you provide the source code

  • @elcheemsjohnny-1270
    @elcheemsjohnny-1270 ปีที่แล้ว

    hello. Is it possible that I can live stream videos with an expired HTML please...?

  • @tanzimulittahad623
    @tanzimulittahad623 2 ปีที่แล้ว

    What if I want to add descriptions to each video ? Please help me

  • @Icodedesigns
    @Icodedesigns ปีที่แล้ว +1

    Hlo bro , video was too amazing , but I want to know that how can we pass selected link from list to load in main video , plz 🙏 let me know

  • @PeakyBlender-pm5gs
    @PeakyBlender-pm5gs 9 หลายเดือนก่อน

    I know no one answer me but l have problem
    When l was coding
    In media query
    Video will destroy even l follow same instructions as show in the video

  • @josephinekwakye4495
    @josephinekwakye4495 2 ปีที่แล้ว

    Thank you very much

  • @truongpham3924
    @truongpham3924 ปีที่แล้ว

    how to change mp4 video to youtube embed?

  • @kaspars-b
    @kaspars-b 2 ปีที่แล้ว

    Thank you! This was exactly I was looking for. Can you tell me, how to implement setInterval to autoplay next video from the videoList?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว

      you can use the function like when video length / or video is finished then it removes the class from the current video and add it to the next one!

  • @Mehrankhan-bh4gf
    @Mehrankhan-bh4gf 3 ปีที่แล้ว +5

    hey brother please share the source code for us some time we got mistakes in creating like that

  • @Ayush76009
    @Ayush76009 2 ปีที่แล้ว +1

    hey i have found the code of java script it is not working please help me

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว

      can you copy and paste your code here so I can see the problem in your code and try to figure out the problem!

  • @astrilaa
    @astrilaa 3 ปีที่แล้ว +1

    Thank you. My media queries don't work. Could you please paste here the exact code regarding to the media queries?

  • @manhtganf
    @manhtganf 2 ปีที่แล้ว

    If I don't want people to download my videos, what source code applies?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว

      then you have to fetch your video from database or google drive and add preventDefault() js method in the video

    • @manhtganf
      @manhtganf 2 ปีที่แล้ว

      @@MrWebDesignerAnas i want to convert it to blob video and be able to autoplay

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  2 ปีที่แล้ว

      you can use 'autoplay' attribute of the video tag with 'muted' attribute to make it work

    • @manhtganf
      @manhtganf 2 ปีที่แล้ว

      ​@@MrWebDesignerAnas How to add titles to videos like youtube

    • @manhtganf
      @manhtganf 2 ปีที่แล้ว

      @@MrWebDesignerAnas I want download code

  • @i1nostranec332
    @i1nostranec332 ปีที่แล้ว

    i am lost, i cannot make 2 columms and i don't understand what i need to do

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  ปีที่แล้ว

      did you created code step by step?
      watch this one :
      th-cam.com/video/w37MUs50xSQ/w-d-xo.html
      it has source code as well

    • @i1nostranec332
      @i1nostranec332 ปีที่แล้ว

      @@MrWebDesignerAnas i did, but the grid didn't work so I gave up. Now i am going to try this code. P.S: flex works

  • @techwithotabek
    @techwithotabek 2 ปีที่แล้ว

    It would be super helpful if you make it using React js as well

  • @TeoDaoHK
    @TeoDaoHK ปีที่แล้ว

    Is it possible to create playlist for embed videos?

  • @gel.ventures
    @gel.ventures 3 ปีที่แล้ว

    Does it autoplay the next video on the playlist?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  3 ปีที่แล้ว +1

      for that you can use setInterval method in javascript

    • @limnono3138
      @limnono3138 3 ปีที่แล้ว

      @@MrWebDesignerAnas Sir,how can I use setInterval to autoplay next video?

    • @howardanddennis1776
      @howardanddennis1776 3 ปีที่แล้ว

      Hope it helps!

  • @jaydeepvishwakarma1790
    @jaydeepvishwakarma1790 3 ปีที่แล้ว +1

    If there is 2 3 text in that what childern [ m] will be pass

  • @jesmapodcast
    @jesmapodcast 2 ปีที่แล้ว +3

    there is a source code about this awesome work?

  • @codewithaarzoo
    @codewithaarzoo 3 ปีที่แล้ว

    ❤❤

  • @camilcamil9239
    @camilcamil9239 ปีที่แล้ว

    Excelente reproductor, será posible hacer que les subtítulos y como hacerlo?

  • @hassaantahir3861
    @hassaantahir3861 3 ปีที่แล้ว +1

    Bro please a tutorial on JavaScript DOM ...

  • @uzmadanyal6363
    @uzmadanyal6363 ปีที่แล้ว

    Hi the video is excellent everything working fine but in the end my h3 is not changing with the video I have checked many times no error but I don't know what java is not working with title

  • @pepitochristianmhilrey2107
    @pepitochristianmhilrey2107 2 ปีที่แล้ว

    Nice Work! Can I pass this in my HTML project? Thank you

  • @techtips9842
    @techtips9842 ปีที่แล้ว

    Hi sir, Can we embed the video from youtube is it posible?

    • @MrWebDesignerAnas
      @MrWebDesignerAnas  ปีที่แล้ว

      yes! all you need is to give same class name as other videos and it should workout the same!

  • @syauqiramadhan7
    @syauqiramadhan7 2 ปีที่แล้ว

    is there a html video player script that supports drm links and mpd links like bitmovin, visualon and others?? please share bro🙏

  • @Islom-vc6du
    @Islom-vc6du 3 ปีที่แล้ว

    Thank you!

  • @tanjirokamado7518
    @tanjirokamado7518 2 ปีที่แล้ว

    Can I ask what app or software r u using??

  •  ปีที่แล้ว

    how can i with wordpress?

  • @juiciodedios777
    @juiciodedios777 ปีที่แล้ว

    Yo lo hice asi me quedo perfecto meno la ultima parte el que los videos se me reproduzcan asi no se lo hice 2 veses y revice todo el codigo y no me resulto no se si es que tienes alguna libreria o que

  • @Wahyuartadianto
    @Wahyuartadianto ปีที่แล้ว

    need help
    how autoplay the play list

  • @geekousearch
    @geekousearch 2 ปีที่แล้ว

    Muito bom!