Jump to content

Background video does not work in Chrome anymore?

Go to solution Solved by Guest,

Recommended Posts

Site URL: https://markusgjengaar.com/

Hi! 

 

I've made a custom HTML/CSS code that could play a video on my front page. 

The video works on Safari (both mobil and desktop) and it works on Google Chrome on my iPhone. 

However the video does not work on Chrome Desktop version for some reason. It used to work, but now it does not play anything. It's just a blank black space where the video should be. 

Anyone out there knows whats happening? 

 

Here is my code:

<section class="Intro">
  <video 
         class="Intro-video" 
         src="/s/Hero-Home-page_v4.mp4" 
         preload="auto" autoplay="auto"
         playsinline="auto"
         muted="auto"
         loop="auto" >
  </video>

</section>


<style>
.Intro-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
  	
}
  
  
  .Intro {
    width: 100%;
    height: 80vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
  
  
</style>

 

Screenshot 2021-10-15 at 13.39.42.png

Screenshot 2021-10-15 at 13.39.53.png

IMG_B9A24F60466D-1.jpeg

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Yes that seems to be it! Does Chrome not support H.265? 

The video now definitely lost a lot of quality being exported to H.264, so I would love to know what the best format for Chrome would be. 

Is there a way I can let Safari play a H.265 file, and Chrome play a H.264 file? 

 

My video used to work in Chrome, so is there any new update or something they changed? 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.