Hi, I used custom liquid for adding my background video with this code below:
video { display: block; margin: 0 auto; width: 100%; height: 50%; }Résultat on mobile version is full screen perfect as I want, but not on desktop it’s not good, I post screenshot for showing how I want it thanks for the help
Let me know guys if better to add some code at existing code
or if better to create different section for desktop/and mobile
hope you guys can help thanks
Hello @hedo
You can try using the below code to show video:
I hope the above is useful to you.
Best regards,
GemPages Support Team
Where do I put this ?
Unfortunately no, getting even worst. Possible 2 make two different section one for desktop one for mobile ?
Hello @hedo ,
Try using the object-fit property to control how the video is resized to fit the container element if it helps.
For example:
video {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -100;
object-fit: cover;
background: url('your-image-here.jpg') no-repeat;
background-size: cover;
}
This will stretch the video to fit the container while maintaining its aspect ratio, and crop any excess parts of the video that fall outside the container.
I hope this helps! Let me know if you have any further questions.
So this previous code
video { display: block; margin: 0 auto; width: 100%; height: 50%; }to
video { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -100; object-fit: cover; background: url('your-image-here.jpg') no-repeat; background-size: cover; } correct ? @SocialAutoPostYes, remove background: url(‘your-image-here.jpg’) no-repeat; if not needed.
Also not working