Jump to content

Background video overflowing on mobile

Recommended Posts

Site URL: http://goodstuff.ventures

Hi, 
I made a background video using a mp4 in a code block. It works fine, expect on mobile - the video  section / block "overflows" (I am not sure that is the right term) .
It becomes larger than the whole site / body. 
I attach a screenshot  so you understand my problem.
Does anyone knows where that comes from? 
Thanks!
 

image.png

Link to comment
  • Replies 12
  • Views 386
  • Created
  • Last Reply

@ArminB I used this:
 

<style>
[data-section-id="5f114edc3ab5324738ed058b"]{
    max-height: 95vh;
      overflow: hidden;
}
  .content-hero h1 { color: #f9fd54; margin-bottom: 55px; }
  #myVideo {
    width: 100% !important;
    height: 100% !important;
  }
    [data-section-id="5f114edc3ab5324738ed058b"] .content-wrapper {
     padding: 0 !important;
      margin: 0 !important;
  }
  #block-yui_3_17_2_1_1594969762515_20105 {
    padding: 0 !important;
  }

  @media only screen and (max-width: 800px) {
    .content-hero h1 { margin: 0 30px; text-align: center;}
    #myVideo { width: 100vh !important; }
  }
</style>


 <video id="myVideo"poster="https://static1.squarespace.com/static/5ddc36062f2ab265c0c5ebf7/t/5f101e0054a6c178b029b612/1594891776692/hero-bg.jpg" playsinline autoplay muted loop> 
  <source src="https://static1.squarespace.com/static/5ddc36062f2ab265c0c5ebf7/t/5f101cc2ba11534213f6115b/1594891492904/gsv-bg.mp4" type="video/mp4">
     <source src="https://static1.squarespace.com/static/5ddc36062f2ab265c0c5ebf7/t/5f0f151101621c4e444938f1/1594823977856/gsv-bg.webm" type="video/webm">
</video>

Note that I removed some parts which have nothing to do with the video 

Link to comment

Sorry I forgot I added the "overflow: hiddden;"  after I posted the original message . It helped having the full website correctly displayed on mobile BUT the video still overflows..  I don't find the solution for that 😕

Link to comment

no , I did that at first but using youtube or vimeo is not an option. The video takes too long to load, that is why I made a custom code.

EDIT: I only tried with youtube, the client do not have a pro vimeo account fyi

Link to comment
6 minutes ago, ArminB said:

I like your idea but It's definitely not loading faster (I'd even say slower than average) on my end. So I'd still go with the built-in solution.

Hope that helps!

Thanks for the input - for me and other users I've tested with, it does load quicker than youtube (and it does not display a youtube logo which is nice too) .
Unfortunately, I cannot test with vimeo as there is no trial for the pro account. 
The example you provided with vimeo works very well, perhaps I will just go that road (and that would simplify a LOT my life too!) 

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.