Erase space on sides of mobile video

Hi! I am trying to make this video full size, 1980x1020, so it takes up the full screen on mobile and not have any space on the sides. How can I do this?

We want it to look the same as this page on mobile: https://revealhm.com/orangecounty/

I am trying to recreate this using the video element instead of slider revolution.

Hey Ashley,

Edit the Video Frame Aspect Ratio to 9:16 on mobile.

Thank you! I was able to remove the space by changing the ratio, however, the video does not look like a typical hero. It pops out into a separate video player.
How can I get it to look just like our slider revolution plug in video, and change size or go in a pop out when it’s played. We want it to autoplay and loop, so I have those checked on.

Is it also possible to have a mute / unmute button?

Hello Ashley,

If you want to control the video like play, mute/unmute, you will have to use the Video element. If you want it to display like a Hero video, you can make use of the video as a background video of a DIV element. You cannot control the video though.

Hope this helps.

Bummer. I added a div element and set the video as the background layer on this page: https://revealhm.com/beauty-tips/

How can I set it to show the whole video? I set the height to 1280 and the width to 720, and the video appears zoomed in and not centered.

Hello Ashley,

You can set the minimum width of the DIV element to 100vw and set the minimum height to 100vh so that the DIV element will have the same dimensions as your screen. You can use % if you want the DIV element to have the same width as your Column element.

Kindly let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.