video background

lu72 · February 8

Hi,

I want to use two different videos like background video, but i've a problem in mobile version.

I set a vertical video <768, but in mobile, the video is cropped.

You can see here https://ronchetti.punto360.com/

How can I have the entire video adapted in full screen?

Thanks in advance

Phil · February 8

Hi,

You must prepare a second video for mobile display and use Responsive Visibility options to create a second section that will be displayed only on mobile and with the correct video.

https://support.muffingroup.com/video-tutorials/responsive-editing-in-bebuilder/

Best regards

lu72 · February 8

Yes, i already did that...if u look the link that I've send u, can see that there's 2 different video from mobile and desktop.

My problem is another...the video that I insert in mobile, result cropped, and I don't know why.

U can see also the attached images:

In desktop there's a blue video with the writing TEXT and TEXT can be seen in its entirety.

In mobile there's a yellow video with the writing TEXT and TEXT is cut off, there is only TE

Immagine 2024-02-08 160457.png

Immagine 2024-02-08 160803.png

lu72 · February 9

please, can u help me to solve this?

Phil · February 9

Please use the following CSS code and check if the problem persists:

@media only screen and (max-width:767px){
 section .section_video video{
   width: 100%;
 }
}

Please put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

lu72 · February 12

IMG_4363.PNG

Hi,

the code works, but in mobile two bars with small dots appear, at the top and bottom; u can see that in image attached.

How can I remove the dots?

Phil · February 12

The dots can be removed with the following CSS:

.section_video .mask{
 display: none;
}

But the bars depend on the device viewport, as the video is scaled down:

You can move the video to be always at the top by modifying the CSS code I sent you in my previous message to the following one:

@media only screen and (max-width:767px){
 section .section_video video{
 width: 100%;
 position: unset!important;
 }
}

Best regards

video background

Comments