Issue - Video Background does not resize on mobile browsers
Author: Christopher F.
Visited 2194,
Followers 1,
Shared 0
I added a Video as bacground and checked "Extend to the width of the browser window" on Rows Formats window, then the video background look and resize correctly on PC browsers, but on mobile devices I just see parts of video like it was cut or incomplete.
Can any one help me to resize the video to fill the screen on mobile devices?
URL: www.albisuteria.com
Thank you!
Posted on the
Christopher, I am surprised you see the background video at all on your mobile. On my phone there is no video at all in either landscape or portrait (or maybe I simply didn't wait long enough to load the large video file).
Author
Im attaching a screenshot .jpg from an Android S7 Edge Samsung, where a big green grass background can be see however the girl typing is not visible.
Hi Christopher.
I verified this and can confirm that it is currently the correct behavior of such functionality. You would find the same were you to use an image instead of a video as background.
The way in which this effect is built makes it so that it keeps the same height at lower resolutions too.
For this reason, the video will not resize in both width and height, but will remain tall just the same. For this of course, part of the video will be clipped, starting from the right edge.
In order to get the main subject still in the frame at lower resolution, it would need to be standing on the leftmost side of the video
I hope I made the matter clearer for you
Thank you
Stefano
Author
Hi Stefano,
Your description is exactly what Im experimenting.
So, can you please tell me the way (by code or configuration on X5 platform) to resize width and height in order to see the whole video in the background at lower resolutions?
Thank you!
Christopher, unfortunately Incomedia cannot assist with 3rd party code, but if you are lucky another user may have a solution.
You can use a video object in a row and extend to browser width now, but unfortunately there is no way to continuously loop the video at this time. I tried as you will see in the attached file (just drop a video into the video object on the home page), and I used the sticky menu to create your text and link overlay. You will see that this technique does correctly resize the video for each resolution (although I have only done desktop and tablet). Close, but no cigar.
Hi, I saw your message: https://helpcenter.websitex5.com/en/post/203976#comment5
... in the meantime, try to do this test ...
replace the current video (782x440px) with a video of reduced dimensions, for example 480x360px (4: 3), or 480x320px (3: 2);
... tentatively try to replace the URL with that of my video, so that you can quickly check:
http://www.kolasim-zone.it/tubular/orsok.mp4
http://www.kolasim-zone.it/tubular/orsok.webm
Hello - ciao
.
Author
Hello KolAsim,
I replaced my video with "http://www.kolasim-zone.it/tubular/orsok.mp4" and on mobiles devices it fit great!, however on PC the video is displayed with a degrated pixelated definition.
Is there a way to show the high dimensions video on PC resolutions and show the reduced dimensions video on mobile resolutions?
Thank you in advance!
(It > En) - Hello, ...I would advise you to use Youtube video, lighter and more compatible, without bind the band...
... anyway yes, it's possible; if you are interested in replacing the video at reduced resolutions, it is possible with JavaScript EXTRA code ...
... if you are interested in this solution, let me know that I will post my code ...
.
Hello, ciao
Author
Hello KolAsim,
Im interested in your JavaScript EXTRA code solution, it will help me to have a complete and quality design in the webpage intro.
Can you please post your code?
Thank you for your interest!
(It > En) ... ... OK; ... paste > this code (temporary!), in this section:
>> Step 3 - Map > The Page Properties window | ▪Expert | ▪Custom Code: -▼Before closing the HEAD tag
... try this way with my URLs; ... then if it works, change the URL with your VIDEO, and you can adjust the swipe window, currently set to 800 pixels.
ciao
.
Author
Hello KolAsim,
It works great!
Now I can show a background that fit on low resolutions devices and a high resolution video that fit on PC browsers.
Let me know if I can do something for you.
Thank you for your time and interest to share your knowledge and help people with questions!
... ... ciao ... ...