Jump to content

Video code block not running in all browsers

Recommended Posts

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>

Screenshot_20210108-123730.png

 

@tuanphan

Link to comment
  • Replies 10
  • Views 622
  • Created
  • Last Reply

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>

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.