Joomla Templates Club 406,261 posts

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#204214

Hello,

It appears that the video, while loading and playing fine on desktop devices, is not showing on mobile devices. Is this something I need to set in the CSS so it displays? If so please provide specifics.

The video I am using is an .mp4 file, here is the code:

<div class=”video-shuffle-wrap” style=”background-color:#ffffff;”>
<div class=”video-shuffle” data-js-view=”video-shuffle” style=”background-color:#ffffff;”>
<div class=”mask”> </div>
<div style=”position: absolute; top: 585px; left: 1700px; z-index: 99999;”><a href=”https://appexchange.salesforce.com/listingDetail?listingId=a0N3000000B5YHjEAN” target=”_blank”><img src=”images/app-exchange-icon.png” alt=”” /></a></div>

<video autoplay=”autoplay” loop=”loop” width=”100%” height=”100%” poster=”” style=”width: 100%; height: 100%; background-color:#ffffff;”><source src=”videos/FW-Salesforce.mp4″ type=”video/mp4″ />

<object data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” type=”application/x-shockwave-flash” width=”100%” height=”100%”><param name=”movie” value=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” /><param name=”allowFullScreen” value=”true” /><param name=”wmode” value=”transparent” /><param name=”flashVars” value=”config={‘playlist’:[”,{‘url’:’http%3A%2F%2F10.0.0.102%2Fja_works%2Fja_appolio%2Fimages%2Fstories%2Fjoomla%2Fwelcome.mp4′,’autoPlay’:true, ‘controls’: null}]}” /></object>
<img alt=”Sample Video” src=”” width=”100%” height=”100%”/>

</video>
</div>
</div>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561118

Hi
video module is hidden by default from mobile devices due to template design and to load the page faster in mobile devices .
If you want to display video module in the mobile devices .Do the work given below :
Go to templates/your JA Template/Your JA Templates/tpls/blocks/video.php
Find this code

<div class="wrap t3-video hidden-xs <?php $this->_c('video') ?>">

Change it into

<div class="wrap t3-video <?php $this->_c('video') ?>">

Clear cache and check .
Take a backup of your site before applying changes .

1 user says Thank You to Pankaj Sharma for this useful post

1. gvenditti

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561120

Fantastic, I will give it a try to see what the loadtime is. Alternately, can I put an image there so it loads instead of the video on a mobile device?

Thank you,
Gene

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561123

Hi Here is documentation of the video module content .
You can add your own image in code .
Here is link

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561124

Just to confirm, is this the portion of the code where I can add an image alternately?

<img alt=”Sample Video” src=”/http%3A%2F%2F10.0.0.102%2Fja_works%2Fja_appolio%2Fimages%2Fstories%2Fjoomla%2Fposter.png” width=”100%” height=”auto” title=”No video playback capabilities, please download the video below” />

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561125

Hi Use the below code to add image not the above the you posted .

<video loop autoplay style="width: 100%; height: auto;" poster="/images/stories/joomla/poster.png">

Here is full code

<div class="video-shuffle-wrap">
<div class="video-shuffle" data-js-view="video-shuffle">
<div class="mask"> </div>
<video loop autoplay style="width: 100%; height: auto;" poster="/images/stories/joomla/poster.png">
<source src="/images/stories/joomla/welcome.mp4" type="video/mp4">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="1011" >
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2F10.0.0.102%2Fja_works%2Fja_appolio%2Fimages%2Fstories%2Fjoomla%2Fposter.png',{'url':'http%3A%2F%2F10.0.0.102%2Fja_works%2Fja_appolio%2Fimages%2Fstories%2Fjoomla%2Fwelcome.mp4','autoPlay':true, 'controls': null}]}" />
<img alt="Sample Video" src="/http%3A%2F%2F10.0.0.102%2Fja_works%2Fja_appolio%2Fimages%2Fstories%2Fjoomla%2Fposter.png" width="100%" height="auto" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
</div>

1 user says Thank You to Pankaj Sharma for this useful post

1. gvenditti

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561130

Thank you! I will try these two methods out and see which one works best – will follow up if I have further questions on this topic.

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561323

Hello,

I changed the code like you said but it’s still not playing on my iPhone. Here is the code:

<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 – 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined(‘_JEXEC’) or die;
?>

<?php if ($this->countModules(‘video’)) : ?>
<!– SLIDESHOW –>
<div class=”wrap t3-video <?php $this->_c(‘video’) ?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘video’) ?>” style=”T3Xhtml” />
</div>
<!– //SLIDESHOW –>
<?php endif ?>

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561325

<blockquote>I changed the code like you said but it’s still not playing on my iPhone</blockquote>
Hello
Is it showing on your device and only not playing auto play ?
Please share your working site url here

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561326

It’s not showing on my phone at all – I’m getting a play button with a slash through it: http://webdev.fairwarning.com/parallax-test

There is a username/pwd prompt, which is okay to post public:

username: webdev
password: FWsfdc2015

Thank you,
Gene

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561332

<em>@gvenditti 461181 wrote:</em><blockquote>It’s not showing on my phone at all – I’m getting a play button with a slash through it: http://webdev.fairwarning.com/parallax-test
</blockquote>
Hi add the below css code in your custom.css file


@media only screen and (max-device-width: 1024px) {
.t3-video .video-shuffle video {
display: block!important;
}
.t3-video .video-shuffle .mobile-video {
display: block!important;
}
}


Clear cache and check.

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561421

Thanks for the quick reply. I added that code to my template.css file however the video is still not playing. It’s an .mp4 file that is approximately 5MB. If there is a specific custom.css file, what directory would that be?

As an alternate solution, if the video is not possible, can the video just be hidden so that I’m not getting an empty white space where the video should be playing? That way, when the page loads the content underneath the video is what you see first, just like it is in your demo: http://www.joomlart.com/demo/#ja_appolio

Thank you,
Gene

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#561425

Hello Ja sugit using a different scenario for video bg you can add the video bg image in JA appolio in the custom html code .

please add the code in custom.css file not in template.css .
Can you re check the site in any other mobile either android or Windows , because in most cases iphone does not allow auto play option for videos from YouTube as well for Vimeo .

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561426

Where can I find the custom.css file? Please provide a directory path.

If I want to hide the video, so that the section underneath it appears up top, what code do I need to modify? Feel free to be detailed.

Thank you,
Gene

[gvenditti Developer gvendittiJoin date: February 2015Posts: 23Downloads:0Uploads:3 Thanks: 6]

#561444

Okay, I have set it so the video will not play on a mobile device, which I am fine with. If there is a way to have an image appear there for just when it’s pulled up on a mobile device please let me know.

Thanks,
Gene

[Author]

Posts