I purchased Grenada I already read all the articles about the subject of videos not working on mobile. And the complicated solution of replacing an image on Custom CSS. Our question is, if this is something we can do per page, since we have 3 categories. So we need 3 mobile thumbnails.
I'm not really sure what do you mean by 'So we need 3 mobile thumbnails.' Are these thumbnails slides in the home slider? Because for video slides, on mobile you have the hero images set in portfolio item options.
if you really want to have the video slide playing on mobile:
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){
.hero-video-wrapper {
display: block;
visibility: visible;
}
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width(); if (viewportWidth < 1024) { $('.hero-video-wrapper').remove(); }
hard refresh the page (Ctrl+F5) when you are done.
What I meant is that I have 3 pages, or 3 categories on my site. Each with a different hero, is there a way to choose a mobile only thumbnail for each hero?
I purchased Grenada I already read all the articles about the subject of videos not working on mobile. And the complicated solution of replacing an image on Custom CSS. Our question is, if this is something we can do per page, since we have 3 categories. So we need 3 mobile thumbnails.
Hello Israel,
I'm not really sure what do you mean by 'So we need 3 mobile thumbnails.' Are these thumbnails slides in the home slider? Because for video slides, on mobile you have the hero images set in portfolio item options.
if you really want to have the video slide playing on mobile:
It is not recommended, as a general practice, having videos autoplaying on mobile (and taking in consideration different data mobile plans and different networks streaming speeds). You should provide a poster image (hero image) for mobile in video portfolio options.
However, to enable video on mobile try the following:
1. add
@media only screen and (max-width: 1024px){ .hero-video-wrapper { display: block; visibility: visible; }
}
in customizer -> additional CSS
2. open/js.scripts.js and remove the following lines:
var viewportWidth = $(window).width(); if (viewportWidth < 1024) { $('.hero-video-wrapper').remove(); }
hard refresh the page (Ctrl+F5) when you are done.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
What I meant is that I have 3 pages, or 3 categories on my site. Each with a different hero, is there a way to choose a mobile only thumbnail for each hero?
Hi Israel,
That would require a custom work in my opinion using wp_is_mobile function to assign different hero images for mobile devices
https://codex.wordpress.org/Function_Reference/wp_is_mobile
or you could use one of these plugins:
https://www.wpeka.com/responsive-images-plugins-for-wordpress-websites.html
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy