Video code block not running in all browsers

Site URL: https://upowr.co/

Hi there,

I'd really appreciate some assistance with a video code block not running in some browsers, and on mobile a blue box around it appears. See image attached.

Video is added as a file in Custom CSS.

HTML added to the code block:

<style>
  .center { 
    margin-left: auto;
    margin-right: auto;
    display: block 
  }

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    .center { 
    width:100%;
  }
}
  
</style>

<video class="center" autoplay loop style="pointer-events: none; align:center;">

    <source src="https://static1.squarespace.com/static/5efdc1faefdd52166bd790fd/t/5fdb0b32de510a316ebf8506/1608190777571/Home-desktop-video-2.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

@tuanphan

Hi. Which phone/browser/browser version do you use?

Hi @tuanphan

I use chrome on desktop, where it seems to be running fine, but not running on safari Version 13.0.5. And the blue tint appears on my android device using chrome.

Hi @tuanphan

I think I have solved it with adding autoplay loop muted playsinline.

But the blue tint is still showing on my android 🙈

<style>
  .center { 
    margin-left: auto;
    margin-right: auto;
    display: block 
  }

@media only screen and (max-width: 1024px) {
  /* For mobile phones and ipad: */
    .center { 
    width:100%;
  }
}
  
</style>

<video class="center" autoplay loop muted playsinline style="pointer-events: none; align:center;">

    <source src="https://static1.squarespace.com/static/5efdc1faefdd52166bd790fd/t/5fdb0b32de510a316ebf8506/1608190777571/Home-desktop-video-2.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

Mobile seems long. You should consider adding a back to top button.

Tablet doesn't look good. Do you want to change to 2 items/row?

@tuanphan will do, but the code for back to top has the same location as our chatbot, so I'll have to figure out how to solve this.

A tweak to change to 2 columns would be great.

What about the blue tint on mobile do you know why this is happening?

Thanks!

On 1/13/2021 at 7:10 PM, anneline_sundby said:

@tuanphan will do, but the code for back to top has the same location as our chatbot, so I'll have to figure out how to solve this.

A tweak to change to 2 columns would be great.

What about the blue tint on mobile do you know why this is happening?

Thanks!

Add to Design > Custom CSS

/* From start to finish tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f03d6dfa3e5fe628cd4a01c .span-12 .span-3 {
    width: 50%;
}
}

Which blue tint?

@tuanphan Thanks for the code for tablet.

The issue and image of blue tint on videos appearing on mobile was added up top in thread. Attaching it here again. It happens on Android and iOS.

I guess it is within video?

On 1/10/2021 at 7:08 AM, anneline_sundby said:

but not running on safari Version 13.0.5

Looked good on my Safari v13.1.2 on desktop. Can you update your desktop Safari? Could be a bug in your old version.

I also checked on my ancient iPhone 5/Safari and looked OK there.

@creedon @tuanphan It is running fine now on all devices, but I am still getting a blue tint/overlay on mobile. Across all videos on the site... 😞