Jump to content

Background video does not work in Chrome anymore?

Recommended Posts

Posted

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

  • Replies 3
  • Views 787
  • Created
  • Last Reply
Posted

I'm guessing the file is HEVC encoded. Have you tried encoding in H.264 to see if this works?

Posted

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? 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.