"Video slide background play in background" (#921956) / ClaPat Studio

Comments

2
Ivan Giorgi started the conversation
October 14, 2016 at 4:31pm
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.

1,795

Support replied

October 15, 2016 at 9:02pm

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

https://www.clapat.com/

Review Envato Item Support Policy

2
Ivan Giorgi replied
October 21, 2016 at 6:21pm
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
2
Ivan Giorgi replied
October 21, 2016 at 7:26pm
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
1,795
Support replied
October 24, 2016 at 11:57am
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

https://www.clapat.com/

Review Envato Item Support Policy
2
Ivan Giorgi replied
October 24, 2016 at 8:10pm
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
1,795
Support replied
October 24, 2016 at 9:11pm
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

https://www.clapat.com/

Review Envato Item Support Policy
2
Ivan Giorgi replied
October 25, 2016 at 4:08pm
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
1,795
Support replied
October 26, 2016 at 10:36pm
Sorry, that's all I can think of.
Thank you.

Clapat Support

https://www.clapat.com/

Review Envato Item Support Policy
1 Like