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). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. 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.
3. go to showcase-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_section_container.php
California is different than the themes below: the video starts on hover which you don't have on mobile and the video bg cover does not have styles on mobile.
Hello,
I setted a video in portfolio showcase.
It's works well on desktop but not on mobile.
It's seems that the "hero-video-wrapper" class is not showed under a screen size limit.
I didn't succeed to manage that, I didn't understand that could be responsible for that in shortcodes.css.
Could you help me ?
Thanks
Hi there,
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). Also, the problem with ios devices is they interpret the HTML 5 videos as videos without player so they will embed it it in a popup player. 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.
3. go to showcase-page.php and change the following line
<video loop muted class="bgvid">
to
<video loop muted playsinline class="bgvid">
same thing for /sections/hero_section_container.php
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Hello, is this also working for the "California"-theme? I can't see for which of your themes these adjustments are specified.
Hello Enrico,
This applies to Grenada, Colega, Bauman, Canela
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy
Thank you for the reply,
could you provide the code to display videos in the showcase slider for the california theme as well please? Thank you very much in advance.
Hello Enrico,
California is different than the themes below: the video starts on hover which you don't have on mobile and the video bg cover does not have styles on mobile.
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy