Is there a way to display a different background video for mobile?

I'm linking a Vimeo video to my website, and the resizing displayed on mobile isn't quite right

Is there a way to have two alternative videos to display, one for viewing on a desktop and one for mobile?

 

Brillant, that worked well! Thank you

Hi all,

I have been using a code to display a different video on mobile, and have noticed that the site Footer is no longer displayed on the homepage with the below code. 

Is there an easy fix to ensure the Footer is showing? 

Site: https://www.socialseason.net/

Code i'm using in the Page Header:

<style>

  /*
  
    begin page section first blank hide
    
    Version     : 0.1d0
    
    SS Version  : 7.1
    
    By          : Thomas Creedon < http://www.tomsWeb.consulting/ >
    
    */
    
    .page-section:first-child.section-height--medium:not( .content-collection ):not( .gallery-section ):not( .user-items-list-section ) {
    
      min-height : unset;
      
      }
      
    .page-section:first-child > .content-wrapper {
    
      display : none;
      
      }
      
    /* end page section first default hide */
    
  </style>

Add this to Page Header, under your code

<style>
  footer.sections .content-wrapper {
    display: block !important;
}
</style>