I noticed that in your demo for Hervin, in the mobile version, the video (only dance) does not play in the showcase slider. Does this means that any video I place there will not run 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). 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 line 51
I noticed that in your demo for Hervin, in the mobile version, the video (only dance) does not play in the showcase slider. Does this means that any video I place there will not run on mobile?
Hello Alan,
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 line 51
Thank you.
Clapat Support
https://www.clapat.com/
Review Envato Item Support Policy