In the process of optimizing my site and had a couple questions:
Background Video:
Using the Nectar Slider I've got a 10 sec video loop set as a background video which calls both a WebM (converted with the converter mentioned in the documentation) as well as a MP4 video file. While this autoplay's fairly well on Desktop, MOST of the time I cannot get the video to play on mobile (even when connected to wi-fi and it will just stay on the preview image), rather than show the preview image it will be stuck on the first frame of the vide, and even sometimes I get a play button in the video. You can see this here.
I know it might not be optimal to be loading a video file on the homepage slider, but this really would be a great asset to have if I can get it working. Would the team have any recommendations for video size, video format, etc for things to work the way it should (i.e. show the fallback image until the video begins to play)?
WebP Converter
I was advised that instead of re-exporting / re-importing all the images of my site (most of which are 2000x1333 web optimized .jpg), it would be best to use a WebP converter / image optimizer plugin. I'm wondering if you guys might know of or be able to recommend a converter that plays well with Salient, and if someday this type of conversion might be available natively in the theme?
Only Self Hosted Videos will play on Mobile if we do not turn them off in the Salient Theme Options Panel > General Settings > Functionality. Please check and ensure you have not disabled the mobile video functionality.
I ended up taking your advice on the WebP converter and while I've found a number of my images are a bit over optimized by and large Imagify has worked great, so thank you for the recommendation.
As for the background video, even though I've verified the self hosted video is enabled and the file formats are correct it's still really hit and miss. Sometimes the video will play on mobile, sometimes I'll only get the fall back image. Most of the time rather than getting the fallback image on tablet or desktop it will be stuck on the first frame of the video until it's played (and sometimes I even get a play button that appears) See screenshots:
I absolutely love the background video functionality, but just don't really want to touch it unless it's predictable. If you guys has any other suggestions, recommendations regarding settings, hosting, etc. or could let me know if I'm doing something dumb here please let me know. Thanks!
I can't seem to replicate this error from our end. The background video seems to be working as it should. Were you able to sort this out from your end?
Alternatively, you can test this on a different device and let us know how it goes.
Thanks Andrew. Prior to reaching out I had tested this on numerous devices including iOS, Android, Apple Desktops and just confirmed with a friend that confirmed on his PC desktop that while the video eventually loaded, it did not display the fallback image, was stuck on the first frame before it started to play and also displayed the play button as my screen shot shows.
I know you were not able to replicate these issues, but I'm showing you screenshots of what we are encountering. Is it possible for someone to help us configure this in a way that the fallback / background videos can work as intended?
As you can see I'm using both a webM and mp4 file both of which were converted on the recommended platform. I was wondering perhaps this could be a hosting issue, but then again, even if my hosting solution was slower shouldn't I at least get the preview / fallback image (which is a highly optimized webp file) to show rather than it just pausing on the first frame? Is there anyway to prevent this from happening?
Hey guys...
In the process of optimizing my site and had a couple questions:
Background Video:
Using the Nectar Slider I've got a 10 sec video loop set as a background video which calls both a WebM (converted with the converter mentioned in the documentation) as well as a MP4 video file. While this autoplay's fairly well on Desktop, MOST of the time I cannot get the video to play on mobile (even when connected to wi-fi and it will just stay on the preview image), rather than show the preview image it will be stuck on the first frame of the vide, and even sometimes I get a play button in the video. You can see this here.
I know it might not be optimal to be loading a video file on the homepage slider, but this really would be a great asset to have if I can get it working. Would the team have any recommendations for video size, video format, etc for things to work the way it should (i.e. show the fallback image until the video begins to play)?
WebP Converter
I was advised that instead of re-exporting / re-importing all the images of my site (most of which are 2000x1333 web optimized .jpg), it would be best to use a WebP converter / image optimizer plugin. I'm wondering if you guys might know of or be able to recommend a converter that plays well with Salient, and if someday this type of conversion might be available natively in the theme?
As always...Thanks much!
Hey Again,
Webp Converter
You can use Imagify Plugin for Image Optimization and WebP Conversion https://wordpress.org/plugins/imagify/
ThemeNectar Support Team
Hi Eric,
Thank you for reaching out to us.
Only Self Hosted Videos will play on Mobile if we do not turn them off in the Salient Theme Options Panel > General Settings > Functionality. Please check and ensure you have not disabled the mobile video functionality.
Please convert the videos and then add them as per their appropriate file format: http://themenectar.com/docs/salient/page-builder-row/#video-background. As for regenerating images, you can use this plugin to regenerate your images https://wordpress.org/plugins/regenerate-thumbnails/. We don't have plugins that we can recommend as we have not tested third-party plugins with our theme, but this can help you with the same.
I hope that info helps.
Thanks,
Thanks much guys...
I ended up taking your advice on the WebP converter and while I've found a number of my images are a bit over optimized by and large Imagify has worked great, so thank you for the recommendation.
As for the background video, even though I've verified the self hosted video is enabled and the file formats are correct it's still really hit and miss. Sometimes the video will play on mobile, sometimes I'll only get the fall back image. Most of the time rather than getting the fallback image on tablet or desktop it will be stuck on the first frame of the video until it's played (and sometimes I even get a play button that appears) See screenshots:
I absolutely love the background video functionality, but just don't really want to touch it unless it's predictable. If you guys has any other suggestions, recommendations regarding settings, hosting, etc. or could let me know if I'm doing something dumb here please let me know. Thanks!
Hi Eric,
Thank you for getting back to us.
I can't seem to replicate this error from our end. The background video seems to be working as it should. Were you able to sort this out from your end?
Alternatively, you can test this on a different device and let us know how it goes.
Kind regards,
Thanks Andrew. Prior to reaching out I had tested this on numerous devices including iOS, Android, Apple Desktops and just confirmed with a friend that confirmed on his PC desktop that while the video eventually loaded, it did not display the fallback image, was stuck on the first frame before it started to play and also displayed the play button as my screen shot shows.
I know you were not able to replicate these issues, but I'm showing you screenshots of what we are encountering. Is it possible for someone to help us configure this in a way that the fallback / background videos can work as intended?
Any help is greatly appreciated.
Hey Again,
Could you confirm if you have converted all the video formats via the convertors mentioned in our article and add the OGV format as well.
- Only Self Hosted Videos will play on Mobile.
- Make sure they are in 16:9 ratio for the mobile to render them correctly.
- Convert the videos and then add them as per their appropriate file format: http://themenectar.com/docs/salient/page-builder-row/#video-background .
- Be sure to turn off this option in Salient Theme Options Panel -> General Settings -> Functionality Tab
Thanks.
ThemeNectar Support Team
All confirmed (see screenshots below).
As you can see I'm using both a webM and mp4 file both of which were converted on the recommended platform. I was wondering perhaps this could be a hosting issue, but then again, even if my hosting solution was slower shouldn't I at least get the preview / fallback image (which is a highly optimized webp file) to show rather than it just pausing on the first frame? Is there anyway to prevent this from happening?
Thanks!
Hey Again,
The Preview image does not show before the video is loaded and is used for Mobile Screens only when Video Background Option is disabled.
Also your main page seems to have to many resources loading simultaneously which could be causing the issue.
Try optimizing the page and check.
Thanks.
ThemeNectar Support Team