How To Add a Video Background with HTML & CSS

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 260

  • @damayantichattopadhyay4662
    @damayantichattopadhyay4662 4 года назад +6

    I was struggling with this concept for almost a month. Thank you so much for explaining it so neatly and beautifully!

    • @ieatwebsites
      @ieatwebsites  4 года назад +1

      I’m happy to hear that! You welcome. 😊

  • @natalieblack4225
    @natalieblack4225 5 лет назад +8

    Great video, infact, probably the best I've seen on this topic! Clear and comprehensive without being too long or complex - straight to the point. Subscribed!

    • @ieatwebsites
      @ieatwebsites  5 лет назад +3

      Thank you so much for saying that!! 😊

    • @natalieblack4225
      @natalieblack4225 5 лет назад +2

      @@ieatwebsites totally deserved! and Thank you for making great content!

  • @arhabersham
    @arhabersham 6 лет назад +14

    And that's how I subscribed to the "iEatWebsites" channel 🌺

  • @abusalehinrifat5516
    @abusalehinrifat5516 4 года назад +1

    you saved my life, i was suffering with the autoplay option, now i have fixed it , great tutorial man!!!

  • @chooseyourtool
    @chooseyourtool 11 месяцев назад

    One of the best, if not the best video on the topic. It works and it is well structured. Many thanks.

  • @massmartin5841
    @massmartin5841 2 года назад +1

    I struggled with this while making a website. Your video, saved my life, haha! Thank you for such detailed tutorial! :D

  • @akosiadam7216
    @akosiadam7216 3 года назад +1

    thanks so much! i just got to Grade 11 and my strand is ICT. we are currently studying how to make websites with HTML and your video helped me so much into making my website beautiful. Thank you so much!!!!

    • @ieatwebsites
      @ieatwebsites  3 года назад

      That’s great! You are very welcome.

  • @akuaron
    @akuaron 5 лет назад +19

    This was very very useful: trying to create my first website, thank you very much!!!!

  • @sirjameshoward
    @sirjameshoward 6 лет назад +9

    Perfect video example, The best that I have seen.

  • @nimrawani7574
    @nimrawani7574 3 года назад +1

    thank you man finally after 2 days I had done this

  • @micaela303
    @micaela303 5 лет назад +8

    Thank you so much! literally watched this all day & finally got it! got a sub from me!

  • @SholaSalako
    @SholaSalako 4 года назад +2

    You are AWESOME! z-index is what I was looking to solve a video background issue. Thank you!

  • @zainax4099
    @zainax4099 2 года назад +1

    I am your 900th like!

  • @saran7513
    @saran7513 2 года назад +1

    TNice tutorials tutorial is so good, tysm

  • @rindangmuharza1509
    @rindangmuharza1509 4 года назад +1

    This video was helpful. We need simple explaination like you did. Thank man.

  • @ddssi
    @ddssi 4 года назад

    Thanks for replying!
    And I love your videos. They are amazing. You are so talented in teaching.

  • @AlanJxcob
    @AlanJxcob 5 лет назад +2

    My title doesn't go t0 the middle even after i follow what you did. What should i do?

  • @swedishchef721
    @swedishchef721 4 года назад +1

    Thank you for the info, very helpful!

  • @Mikey-jf9tu
    @Mikey-jf9tu 4 года назад +1

    Thank You..Its really helpful for me😇

  • @mateusw.bestapp1446
    @mateusw.bestapp1446 5 лет назад

    Perfect!! I didn't know what to do anymore.. Thank you =)

  • @rohankumarmanna
    @rohankumarmanna 3 года назад +1

    Thank you
    it really helps 💜

  • @HuganasJohnVincent
    @HuganasJohnVincent 6 лет назад +7

    where did you get your background video?

    • @Torkiin26
      @Torkiin26 6 лет назад +1

      www.videvo.net/video/birds-eye-view-of-a-tropical-beach/7666/

    • @KobeWasBetterThanBron
      @KobeWasBetterThanBron 6 лет назад +1

      hey man i used this site: coverr.co/ and just used the free backgrounds available.

    • @conceptualarts1
      @conceptualarts1 5 лет назад

      try pexel video.com they are free

    • @hiviber
      @hiviber 5 лет назад

      Sweet! You have the code I can copy and edit?

  • @azadhuseynzade8543
    @azadhuseynzade8543 3 года назад +1

    Thank you very much ! So helpful !

  • @TheOfficialMovmnt
    @TheOfficialMovmnt 3 года назад +1

    Awesome video!

  • @simonecontesini
    @simonecontesini 4 года назад +1

    hi, a question. Why is important mute audio in video? Thaks

    • @ieatwebsites
      @ieatwebsites  4 года назад +1

      If you don’t mute, the video won’t auto play.

    • @simonecontesini
      @simonecontesini 4 года назад

      @@ieatwebsites yes....i see😪

    • @simonecontesini
      @simonecontesini 4 года назад

      Is there any way to do a cover with audio?

  • @myintzumaung814
    @myintzumaung814 4 года назад +1

    Very useful and thank you😊😊

  • @senoriessamusic
    @senoriessamusic 2 года назад

    How do you maintain the video to be responsive across devices of different screen size, fixed center?
    Does the viewport setting help to solve this problem across all devices?

  • @naradaprojectb7919
    @naradaprojectb7919 4 года назад +1

    Thank you !, could you explain how to make the background video always in the center focus position if we resizing the browser windows?

  • @SM-om6tw
    @SM-om6tw 4 года назад

    nice tutorial ! very clear and useful !

  • @ddssi
    @ddssi 4 года назад

    We can use notepad too right, to add these codes?

    • @ieatwebsites
      @ieatwebsites  4 года назад +1

      Yes, but is better if you download something like VS Code, and is free.

  • @vinothvino8759
    @vinothvino8759 5 лет назад +1

    it's good one very help full

  • @ritwikmajumderster
    @ritwikmajumderster 4 года назад +1

    Thank you... it is very help full

  • @gracious_gra3ce
    @gracious_gra3ce 5 лет назад +1

    Thank you very muchhhh.

  • @Jenny-yy9kj
    @Jenny-yy9kj 2 года назад

    how u have this hover navbar in the bottom side (taskleiste) ? 9:26 min

  • @joannahaj1012
    @joannahaj1012 3 года назад +1

    @iEatWebsites I am having trouble with which ever video I try to embedd. I tried embedding the video file to my html exactly as you showed and the video doesn't show at all (other texts do show). I tried using different videos to see if the original one has some issues, but they didn't work either. The browser I'm using is Brave. I tried then opening it with Chrome instead, but still the same problem. After many tries I said I have to download your version and see if that works, because it should, but it didn't!! The video of your shows in my browsers (Brave and Chrome) as a static solid light blue box!! What is the problem I am having? how do I fix this? I'm going insane! your help would be super appreciated!

  • @abdeali1301
    @abdeali1301 3 года назад +1

    Very Helpful ...

  • @nssdesigns
    @nssdesigns 5 лет назад

    nice! What Coding software do you use? Seems cool when you type a class it does the rest for you...

  • @olhakutova190
    @olhakutova190 4 года назад +1

    Thank you very much!😊

  • @mardinamica
    @mardinamica 6 лет назад

    Thanks for video!!) A query, will it be possible to put images of a live video? from a webcam for example? Thank you

  • @jay_garett
    @jay_garett 3 года назад

    I followed the directions to the letter, but the video doesn't seem to scale with the window. Am I doing something wrong?

  • @agencia.cassibox1698
    @agencia.cassibox1698 5 лет назад +1

    Hello! Thanks for sharing the video. I would like to know how I put a RUclips VIDEO into the html background. Would I just replace the .mp4 file over the link?

  • @erd4575
    @erd4575 3 года назад +1

    Thank you for this video

  • @exesy5431
    @exesy5431 4 года назад

    The video must be mp4 file? And also, what about the length? Can I put 40 secs video?

  • @AMANKUVERARMIS
    @AMANKUVERARMIS 4 года назад +5

    UH! the video doesnt cover the whole screen. its covering only the top half

  • @PavelIsp
    @PavelIsp 6 лет назад +3

    Swag, now I just need to make a good enough video :D

    • @ieatwebsites
      @ieatwebsites  6 лет назад +2

      You just need a $3k drone

    • @jahvonjones9822
      @jahvonjones9822 4 года назад

      @@ieatwebsites saying "just" like people can afford that

  • @kcchallengevolleyball14-13
    @kcchallengevolleyball14-13 4 года назад

    When I add the code the navbar is below the video. How do I get the navbar above the video or how can I have the Navbar overlay the video.

  • @hamishludbrook394
    @hamishludbrook394 5 лет назад

    Hi there, great video. Are you able to share where you got the actual video? Would love to use it

  • @thinkbig9499
    @thinkbig9499 4 года назад +1

    thqnks it's so helpfull

  • @letsdamon27
    @letsdamon27 3 года назад

    Hey great Video! Can U Help me? How can i get the Sound from the Background Video in the Background?

  • @cristinaicleanu1731
    @cristinaicleanu1731 5 лет назад

    Awesome, good job!

  • @ridz_k9328
    @ridz_k9328 3 года назад

    hey so i was trying the code but it doesn't seem to show the video in the bkg for me

  • @ajcomedy_studio9322
    @ajcomedy_studio9322 6 лет назад

    you awesome dude..... keep it up.....

  • @moretrenmoremen3421
    @moretrenmoremen3421 4 года назад

    what vidoe did u use in the background

  • @vrwebsites101
    @vrwebsites101 2 года назад

    Hello my video is not working properly when I update it it lags but when I tried another mok video it worked am not able to figure out why? Pls help

  • @KobeWasBetterThanBron
    @KobeWasBetterThanBron 6 лет назад +1

    ma boi. good tutorial.

  • @seifadel1280
    @seifadel1280 5 лет назад

    when i added your video the webpage is blank what should i do ? I want to set the video as background only without any extras

  • @waatzuuki8514
    @waatzuuki8514 5 лет назад

    BOSS where did you get your background video?

  • @tanishshah922
    @tanishshah922 3 года назад +1

    I learned how to do this but I still don't know how can I upload this video to aws and run the same way it does for VS code

    • @ieatwebsites
      @ieatwebsites  3 года назад

      Maybe you can google search. I’m not very familiar with AWS.

  • @spirosskouras7587
    @spirosskouras7587 5 лет назад +1

    my text's background is from max left to max right and i dont know how to fix it

  • @aranimation3164
    @aranimation3164 6 лет назад +2

    wic text editor you are using

  • @JessUIdesign
    @JessUIdesign 4 года назад

    Do you have a video with youtube Video background ?

  • @xsomili5501
    @xsomili5501 5 лет назад

    hi i put code same and i saved video and i put saved under same file, but my video no show, it says: "error not found".. why? how fix

  • @yazer6589
    @yazer6589 4 года назад

    please reply mine has gap on the left and top how to i fixed it?

  • @FreakSheepVODS
    @FreakSheepVODS 3 года назад

    some how its not looping
    any idea why here is the code

  • @ArmandoRodriguez-fd5zk
    @ArmandoRodriguez-fd5zk 5 лет назад

    Hi my Friend, thanks for your help...... can you PLEASE tell me where I can get ocean paradise video????

  • @LoveYourself-mk3hh
    @LoveYourself-mk3hh 6 лет назад +3

    thank you so much :)

  • @nowalijka
    @nowalijka 5 лет назад +1

    Great! Many thanks!

  • @creativevalues
    @creativevalues 4 года назад

    Hi thanks a lot, how to keep the audio for the video

  • @curtishalley2481
    @curtishalley2481 6 лет назад

    I am using wordpress child theme i created. Where do i put the html code if all i have are php files and a stylesheet.css from my FTP?

  • @JakobovYT
    @JakobovYT 5 лет назад +1

    Great!! Thank you

  • @anujbhattarai214
    @anujbhattarai214 5 лет назад

    What to do to add scroll bar or more content in page containing video?????

  • @RaushanKumar-dd9df
    @RaushanKumar-dd9df 5 лет назад

    video is cropped , is that supposed to be ?

  • @sankareasss6166
    @sankareasss6166 6 лет назад

    I have a question what if I don't have a data are the http links will not work's???

  • @samirmendez3048
    @samirmendez3048 6 лет назад

    Hey thanks for the great video, but i have a question, what is the name of this kind of videos, really i need a video like this, but of programming or informatic

  • @TrikaArts
    @TrikaArts 5 лет назад +1

    thanks! used this to make a wallpaper worked well

  • @panorama-works
    @panorama-works 5 лет назад

    What code editor are you using?

  • @PhillipRianOverbeek
    @PhillipRianOverbeek 9 месяцев назад

    What if you would like to add sound?

  • @BStudioCD
    @BStudioCD 6 лет назад

    I think that background: rgba(255,255,255,.8) will look much better than opacity)) And also you can try something from mix-blend-mode property (ex. overlay)) Thanks for video!!)

    • @ieatwebsites
      @ieatwebsites  6 лет назад

      True, but be careful with mix-blend mode. Is not fully compatible. Thank you!

  • @rafaelperezmederos6958
    @rafaelperezmederos6958 3 года назад

    So do you need any of the HTML links? If so can you provide them.

  • @BalachandranSumathiB
    @BalachandranSumathiB 5 лет назад

    Can the video be loaded from youtube source link. ? and is this responsive ?

    • @ieatwebsites
      @ieatwebsites  5 лет назад

      Maybe this helps: codepen.io/lemmin/pen/qqvVeb

  • @joomjump
    @joomjump 5 лет назад

    Hi there, Really good video, I am trying to add my background video on my website plus some things to go on top, I wonder if you have any chance to help me out?

  • @shaikrizwana9258
    @shaikrizwana9258 3 года назад

    Hey !its not working for me ,can u suggest alternative

  • @elvismovie2139
    @elvismovie2139 2 года назад +1

    Nice

  • @fazalwahid5113
    @fazalwahid5113 5 лет назад

    This is working fine on mid screens but relative positioning not working small screens. can anyone help?

  • @davidsoto8445
    @davidsoto8445 4 года назад +3

    I love that video footage, I need to steal it, I mean opensource barrow it.

  • @mamajoyssi9636
    @mamajoyssi9636 5 лет назад

    how do you make the title clickable like a navigation or smthn?

  • @phanntuan
    @phanntuan 3 года назад +1

    thank bro!

  • @jafartemirov7812
    @jafartemirov7812 5 лет назад

    why this is not covered completely. when i set it into my complete webpage , it change their position

  • @mayur3049
    @mayur3049 4 года назад

    hey there, what if I wanna add video with sound? what will the options ?

  • @davitdavtyan8822
    @davitdavtyan8822 2 года назад

    Could you help me
    I can not do it with video on youtube

  • @deantzortal887
    @deantzortal887 4 года назад

    Great video. Just the source code is missing so I cant quite see it working yet. mind resharing?

  • @vijendersingh5941
    @vijendersingh5941 5 лет назад

    when I added a full-screen video my navbar stopped working, what to do?

    • @GnarledCypress
      @GnarledCypress 5 лет назад

      Give your navigation drop down boxes z-index:99 (or some number greater than the video)

  • @BJAX999
    @BJAX999 4 года назад

    but i want sound what do i do?

  • @pendleyparagons
    @pendleyparagons 3 года назад +1

    this is probably gonna sound stupid but does anybody know how to make the video bigger?

  • @windofthejourney
    @windofthejourney 5 лет назад +1

    thank you so much

  • @genjioto
    @genjioto 4 года назад

    Omg thank you.

  • @jinothomas8365
    @jinothomas8365 4 года назад +1

    can you put the link to download files again. its says its unavailable and removed by the owner . i loved the video .

    • @ieatwebsites
      @ieatwebsites  4 года назад

      Sorry! I will try to re-upload and update the link

  • @sondosa.9051
    @sondosa.9051 3 года назад

    How to make video transparent background in video player

  • @jasperw1639
    @jasperw1639 3 года назад

    for some reason the section h1 part doens't work for me (the text doesn't show i front of my video ) anybody knows why ?

    • @ieatwebsites
      @ieatwebsites  3 года назад

      It can be because of the z-index.

    • @jasperw1639
      @jasperw1639 3 года назад +1

      @@ieatwebsites i re watched a part and then i came that i forgot a little . So thats why , good video btw

  • @ebenews6776
    @ebenews6776 4 года назад

    Please help me! how can i add the file on my wordpress website? Please help me