video background
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
Comments
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
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
please, can u help me to solve this?
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
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?
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