Video in Mobile view

Peter London

• July 09, 2024 19:13

Hi, I would to have a video in the mobile setting which is a background video.

The video in mobile view should go over the header. Also with some text in the middle over the running video. In desktop I can do this but how do I do this in mobile view?

Here's a website from a company what I exactly want to achieve, a video in Mobile view over the header with some text in the middle.

www.skarper.com

Thanks for your help!

Greetings,

Peter London

0

• 

  Kc George

  • July 10, 2024 08:29

  Hi Peter,

  After adding a video background to the hero block, add a negative top margin of approximately -180 pixels and a top padding of approximately 180 pixels. Ensure that the header block has no overlay color applied.

  Kindly have a look at https://jmp.sh/RJCOfVAS for the procedure to add a video background that fills the entire screen.

  To display the video on mobile and tablet devices, kindly add this code under CMS - Project Settings - Code - Custom CSS

  @media (max-width: 991px) {
  .brz-bg-video {
      display: block !important;
  }
  } 

   

  0
• 

  Peter London

  • July 10, 2024 10:12

  Hi KC George,

  Thanks for the solution. The css code did the job!

  Greetings,

  Peter

  0

Please sign in to leave a comment.