-
Posts
-
Dear support team,
I am having a problem with a video background for a color section on mobiles and some tablets.
On desktops it runs smoothly, but on mobiles i’m getting a weird placement of the clip
https://www.dropbox.com/s/051eecgs5dn1ccp/video%20cover%20error.png?dl=0it won’t play automatically and shows the play icon, also it slides to the next section of the page.
This happens on all mobiles and on some tables.
The video files is directly on the server.How can I overcome this?
thanks in advance
Elad.
Hey VJLoops-GT,
Thank you for the inquiry.
Are you referring to the following video? (see private field)
Looks like it’s how the video is actually created — with an overlap or duplicate effect in the top area.
Best regards,
IsmaelHey Ismael
Yes this video, but the overlap is not what I’m talking about. The overlap is something I did on purpose at the moment to align the chosen part of the video better.
See my screenshot
and note how the video is playing in the back of the Instagram section, instead of staying in its own color section like how it works on the desktop:Additionally, sometimes there would appear a 16:9 empty video placeholder without the actual video inside and then I have to refresh the page.
Hello again
I have replaced the video with another version that is 22:9, so the overlap is gone, but the mobile functionality still isn’t working properly.
The video won’t play on a mobile and I just see a freeze frame.
thanks
Elad.
Hi,
Glad that you found a solution for the overlap issue.
The video won’t play on a mobile and I just see a freeze frame.
Please note that background videos are disabled on mobile devices by default, which is why a fallback image option is available. You can either add the fallback image or hide the color section on mobile view by editing the element’s visibility in the Screen Options tab. If you really need the video to display, you can add a Video element, toggle its visibility so that it only displays on mobile view, or use the Layer Slider.
Best regards,
IsmaelHey Ismael
I tried doing it with the Layer Slider but the result didn’t work so well. I kept seeing the Youtube logo if using Youtube,
and if using the link of the video file: https://byroni.co.il/wp-content/uploads/2020/07/Roni-16-9-halfsize_380.mp4
Then It was just not playing or not showing at the current resolution.Now, even the previous method I used via the ColorSection Video Background doesn’t work on Desktops, I’m getting this result:
https://www.dropbox.com/s/hex4d7dbck5w7h1/Screenshot%202020-08-03%2009.53.44.png?dl=0With the Video Element, It won’t show full screen (from side to side) and also won’t Autoplay even though I marked Autoplay ON
I am not sure why is it not running smoothly every time.
Thanks in advance,
thanks!Elad.
Hi,
Thank you for the update.
The Video element by default doesn’t have a full width option and users have to play it manually on mobile view. You may have to consider using the fallback image option instead, then add a link or button which opens the video externally or in a modal popup window on mobile view.
Best regards,
IsmaelHey Ismael,
that’s not very ideal..I know many websites which use a video background in the homepage,
the video is compressed to 2.5mb or so – it shouldn’t be a problem on mobiles.Is there maybe another way of making it happen? it does work from time to time on mobiles but mostly it won’t play.
thanks
Elad.
Hi,
As suggested previously, the only other option that is available in the theme is the layer slider. You have to create a new layer, set the type to Video / Audio and enable the Use this video as slide background option. You may also need to adjust the Fill Mode if you want to retain the actual resolution or size of the video. The default option Cover will automatically resize the video so that it fully covers the slider container.
Best regards,
IsmaelHey Ismael,
I tried that as well, but it won’t work.
As you can see the video file works as a direct link : https://byroni.co.il/wp-content/uploads/2020/07/Roni-16-9-halfsize_380.mp4
and the Layerslider settings seem correct: https://www.dropbox.com/s/7l251jqrwjl93ee/Screenshot%202020-08-10%2009.40.17.png?dl=0
When I try to browse either via desktop or mobile I’m getting a white slide: https://www.dropbox.com/s/cxd3ewo425twqq2/Screenshot%202020-08-10%2009.43.08.png?dl=0
One video that does play correctly is the one using the ColorSection, but that won’t show on mobile correctly.
Why doesn’t the Layerslider work?
thanks
Elad.
Hi,
You have to embed the video using an iframe or a video tag. Click the “Change Media” button and upload the mp4 video in the media library. You can also use videos from youtube or vimeo.
Example of a video tag.
<video width="640" height="360" preload="metadata" controls> <source src="/wp-content/uploads/video.mp4" type="video/mp4"> </video>Best regards,
IsmaelHey Isamel,
I am not sure I understand where exactly to insert this code.
Is this within the Layerslider interface? or as an HTML code within the page itself?
And I need it to be fullscreen (full width)
The video is already in my media library it’s just showing as white.
thanks
Elad.
Hi,
Have you tried clicking the “Change Media” button in the Video/Audio layer? This should open up a modal pop up window where you can add the URL of the youtube or vimeo video or select a locally hosted media file from your media library.
You can also delete the current one and add a new Video/Audio layer again to see the modal popup window for the media files. And after selecting the media file or placing the required video URL, this will automatically add the embed code (iframe or video tag) in the layer field.
Best regards,
Ismael
- The topic ‘Video background malfunctioning on mobiles’ is closed to new replies.