Mobile and desktop video

[kaankurt25]

I am trying to adapt my videos to full capture the screen on desktop and on mobile. Mobile cuts short and the desktop has some more room left. Can someone help? I have tried to go through other people's discussion post who got help but none of the codes seem to work. I don't know if I am doing something wrong or not.

[kaankurt25]

I am using a 16:9 resolution on my video. I want my video to fill the mobile screen and keep the desktop display,

[kaankurt25]

Where could I find that part? I cannot seem to find it

[tim]

You need to share a (preview) link to the page you're working on.

The solution is theme-dependent and may differ between sections.

Also, one can't expect the 16:9 video to cover entire mobile screen which is 9:16 without cropping, which will be significant in this case.

You may need to have separate videos for landscape (desktop) and mobile (portrait).

[kaankurt25]

aldoresavant.com is my website. Password is: aldore

[kaankurt25]

David, I do not see the code you are mentioning

[tim · Accepted solution]

This can go into "Custom CSS" setting of this section:

.video-section .video-section__media {
  height: calc(100vh - 76px);
  width: 100%;
  padding-bottom: 0;
}
@media (max-width:990px){
  .video-section .video-section__media {
    height: calc(100vh - 68px);
  }
}

It's not the best because the height of the header changes 76 px on desktop and 68px on mobile

[tim]

If you set your header to Sticky: Always, i believe it will be simpler:

.video-section .video-section__media {
  height:100vh;
  width: 100%;
  padding-bottom: 0;
}

[kaankurt25]

That worked perfectly! The header was not changed at all. Thank you!!

[tim]

I mean, header originally has different height on mobile and desktop, so I had to account for this in my code.