Background video overflowing on mobile

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!
 

what's the embedding code you used?

@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 

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 😕

have you tried to simply add the video as "background video" to the page?
like here: https://www.taliscapital.com
 

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

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!

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

sure! yes, I'm also making better experiences with Vimeo. All the best!

@ArminB I got a vimeo account to test and it still takes time to lad the video - a lot more than the example you sent (https://www.taliscapital.com).
Some collegues tested it and same: taliscapital loads super fast, while https://www.goodstuff.ventures/home-1 takes ages.
Could it be that the video is too big/not compressed enough?  or something else I am missing? 

Have you solved it yet?

This morning I just solved a similar problem when using video tag

16 hours ago, tuanphan said:

Have you solved it yet?

This morning I just solved a similar problem when using video tag

@tuanphan No! I would be happy to hear how you solved it 🙂

It works now - the last code I wrote seems to do the job : )