Jump to content

Background video not showing in mobile

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hi there,

My hero-video, which is a background video from Vimeo wont show on mobile. I'm using custom code on the rest of the site, but not in this section and I cannot see that any of it would interfere. Just in case, I've pasted the code here is anyone can see if something would block mobile view for my front page 🙏🏼

www.mannafilm.dk 

Thanks a million!

/Cecilie

 

 

CODE
a {
  text-decoration: none !important;
}

p {
  line-height: 1.2
}

h3 {
  line-height: 0.9
}
//Lille sektion øverst for at agere baggrund til menu

#block-627427bcfbbaf2117580ae32
{margin-top:-50px;}

//hover effekt i menu
/* Nav item color */
.header-nav-item a {
    transition-duration: 0.4s;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #FFB0FE !important;
    transition-duration: 0.4s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #2E37FE !important;
}

//.header-nav-item a{background-image:none!important;}
//.header-nav-item:hover  {background:#2E37FE;}

.header-nav-item {padding:0.6rem 1rem 0.6rem 1rem!important;}


//links hover


//tekst i footer
footer p {
  font-size: 0.8rem !important;
  letter-spacing: 0.1rem;
}

footer a {
  font-size: 0.8rem !important;
  text-decoration: none !important;
}

footer a:hover {
color: #FFB0FE;
}

//Linjeforskel på film
#collection-6242c66f40b295524d4729a7 p {line-height: 1.2}


#collection-6242c66f40b295524d4729a7 h3 {font-size: 1.5rem; line-height: 0}

//links
p a:hover {
  color:#FFB0FE!important;}

@media only screen and (min-width: 660px) {
section[data-section-id="63a194c96f5be9130adbc0ba"]
 .sqs-block-html{
background: hsla(317, 0%, 32%, 0.55);
transition: all 1s;
}

section[data-section-id="63a194c96f5be9130adbc0ba"]
.sqs-block-html:hover{
opacity: 0;
transition: all 1s;
}
}

//Ret coverbilleder
//Kalak
   #collection-63a0137ff91ce37a2bc9bd3b .page-section:nth-child(1) .section-background {margin-top:100px!important}

//When two become one
  #collection-63a4ce3d37a37a550b62d907 .page-section:nth-child(1) .section-background {margin-top:100px!important}

//Songs in the sun
#collection-6255c444b28cb46dbf211339 .page-section:nth-child(1) .section-background {margin-top:80px!important}

#collection-6255bc9a141c3a1b4390861c .page-section:nth-child(1) .section-background {margin-top:80px!important}

  • Solution
Posted

video may not always display on mobile devices, depending on the visitor's connection speed and browser version. Set a mobile fallback image to appear if the video banner can't load.

Detail: https://support.squarespace.com/hc/en-us/articles/218562738-Adding-background-videos#:~:text=Click Edit on the page,over Done and click Save.

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!)

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.