Video for mobile vs Desktop

Hi all

Stuck on what I thought would be something simple to implement... Any help would be greatly appreciated.

I want to include a showreel video on my site.
This needs to exist in two formats, so it looks good for both Desktop and Mobile views.

I've created two separate video files:
— 16x9 For Deskstop
— 4x5 Mobile

How can I code via CSS to switch the assets for corresponding device?

website: www.studioyoung.co.uk

video block in question
#block-yui_3_17_2_1_1714860073696_44912

image reference attached.

Many thanks for help in advance as this is driving me insane!

Try this CSS:

@media only screen and (max-width:767px) {
  section[data-section-id="66340409d7dea276bd80b731"] {
    .video-block { 
      .video-player {
        padding-bottom: 125% !important;
      }
    }
  }
}

Hey Ziggy

How can I get it to link to a different asset though. I have 1 videos created in 2 different formats. So with that code at present, it just calls up the video asset I created for Desktop.

Does that make sense?

Just now, Inkdave said:

How can I get it to link to a different asset though. I have 1 videos created in 2 different formats. So with that code at present, it just calls up the video asset I created for Desktop.

You need to add the videos to 2 video blocks and then we can use CSS to show/hide each video block on desktop/mobile.

Ziggy that works with a little tweaking. Thank you so much.

As a sub question to this:
Can I get my video content now to fill its player container in mobile view?

thanks again 

Thinking out loud, how can I also adjust height of mobile video player if needed?

For instance, I might want to make the current one bigger?