I'd like to know how to automatically play a video background slide (in Showcase Slider) on mobile (iOS + Android) instead of showing a static picture. iOS 10 can now reproduce automatically video background in mute or without audio: how to achieve that with SOHO?
And if that's impossible for now, how to hide a slide only on mobile continuing to show it on computers?
Thank you
P.S. Sorry for the title. I meant "Play a background video slide on mobile". Feel free to edit it.
Unfortunately, with Safari on iOS 10, the first solution lets me see the video background stopped on the first frame (no playing) with the Play symbol ">" under the text overlay but if I try to tap it nothing happens. In the other hand, the automatic play works on Chrome for Android.
The second solution to remove the video slide from mobile view doesn't work because I still see the slide with a picture background while I'd like to completely hide/remove the entire video slide on mobile.
The first option breaks something so the page wouldn't load at all while the second one does not change the slide reproduction on iPhones. Please, let me know if there's some other trick to make it work.
Hello there and congrats for this amazing theme.
I'd like to know how to automatically play a video background slide (in Showcase Slider) on mobile (iOS + Android) instead of showing a static picture.
iOS 10 can now reproduce automatically video background in mute or without audio: how to achieve that with SOHO?
And if that's impossible for now, how to hide a slide only on mobile continuing to show it on computers?
Thank you
P.S. Sorry for the title. I meant "Play a background video slide on mobile". Feel free to edit it.
Hello, there are some steps you need to enable video slide playing on mobile (although not recommended due to performance reasons):
- open /js/scripts.js and remove this bit
if( $('#bgvid').length > 0 ){ var onMobile = false; if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { onMobile = true; } if( ( onMobile === true ) ) { document.getElementById("bgvid").remove(); } }- add
@media only screen and (max-width: 1024px) { #bgvid { display: block !important; } }in theme options -> styling options -> custom css
If this one fails, add
@media only screen and (max-width: 1024px) { .pagepillingslider.section.video{ display: none; } }to hide video slides on mobile( for resolutions less than 1024px to be more precise)
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Hi, thank you for the fast reply.
Unfortunately, with Safari on iOS 10, the first solution lets me see the video background stopped on the first frame (no playing) with the Play symbol ">" under the text overlay but if I try to tap it nothing happens. In the other hand, the automatic play works on Chrome for Android.
The second solution to remove the video slide from mobile view doesn't work because I still see the slide with a picture background while I'd like to completely hide/remove the entire video slide on mobile.
Any help?
Thank you,
Ivan
P.S. Could this one be useful for my purpose?
https://github.com/bfred-it/iphone-inline-video#usage
If yes, could you please explain to me how to integrate that code?
Thanks again,
Ivan
Hello,
You can integrate it in
showcase-page.php file , btween line 90 and 117
<?php if( $soho_slide_type == "video" ){ ?>
...
<?php } else { ?>
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Hi, thanks for the reply.
I have inserted the attribute where you told me:
<div class="video-wrapper">
<video autoplay loop id="bgvid">
<source src="<?php echo esc_url($soho_slide_video_bknd_webm); ?>" />
<source src="<?php echo esc_url($soho_slide_video_bknd_mp4); ?>" />
playsinline</video>
</div>
but I don't know where to put the activation call:
$('video').each(function () { makeVideoPlayableInline(this); });Sorry, I'm not a developer, can you help?
Thank you,
Ivan
Hi Ivan that would be in
function FirstLoad()
in file /js/scripts.js
you can add the code in line 107
if this fails try replacing
if( $('#bgvid').length > 0 ){
var video = document.getElementById("bgvid");
if ($(".active").hasClass("video")) {
video.play();
}
}
line 703-708 with that code.
Hope it works
Thanks
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
Hi, unfortunately it does not work.
The first option breaks something so the page wouldn't load at all while the second one does not change the slide reproduction on iPhones. Please, let me know if there's some other trick to make it work.
Thaks a lot,
Ivan
Sorry, that's all I can think of.
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio