NDESIGN

YouTube videos don't work on IOS (iPhone/iPad)

26 posts in this topic

I've installed BT Background Slideshow on my new Joomla Website. On a desktop everything works fine but checking the YouTube video on IOS device I noticed that it doesn't show. Any solutions to this?

Share this post


Link to post
Share on other sites

Hi, thanks for your reply. I can't give you my url because I'm working on a local server. I can see the same error on you're Video Background Demo from my iPad (IOS6):

http://extensions.bowthemes.com/bt-background-slideshow/video-background.html

The only way to see the video is to set the autoplay on 'off' on the EMBED VIDEO CONFIGS but then I get the YouTube PlayButton that is not great on a background and hard to click if you have an overlay div (like a pattern)

Share this post


Link to post
Share on other sites

Hi,

This css will help you remove clicking overlay div

.bgd-over-image{

pointer-events:none;

}

Add it to file the mod_bt_backgroundslideshow\tmpl\css\style.css line 45

Share this post


Link to post
Share on other sites

Thanks for the css, this will solve the problem of the pattern but it doesn't solve the problem of the video not showing on IOS wile you have the slide show set on auto. Hope to fix this soon for IOS, it's great to have this function ( video background ) but it should be compatible with mobile devices.

Share this post


Link to post
Share on other sites

bumb...I just bought this extension. I guess I should have read support issues first. I think it's a basic request that is would work on mobile devices (ios). Any updates on this?

Share this post


Link to post
Share on other sites

It seems to me that ios does not like/allow for videos to autostart. Since this is a known, the programming of this module should allow for autostart on desktop but be overidden when viewed on a mobile device. This should be in the default programming. Can you fix this? Or let us know how to fix it. Is this an update in the js?

Share this post


Link to post
Share on other sites

Hi there.

I know this feature is really important on IOS

But on apple device, it run video by Quicktime Player and we haven't find out solution to run video slideshow on IOS like Android or desktop

I'm so sorry.

We will try to find out solution in next days.

Share this post


Link to post
Share on other sites

I'm trying to run a full screen video on ios. I can get the video to play just fine. I don't think it's a quicktime issue. When I land on the page with the video (set to autoplay), it acts like it wants to play the video indefinitely but nothing happens. If I tap on the video screen, it pauses. When I tap again, it plays just fine. I think what needs to happen is in your code, it needs to understand that if a site is being viewed from a mobile device, Autoplay is set to NO. Otherwise it is set to whatever the user has set it to in the module manager.

Share this post


Link to post
Share on other sites

Hi Jacob.

thanks for your advice.

At current version, the module allow user can enable/disable video autoplay with "Auto Play" parameter in "Embed Video Configuration" pane (tab on Joomla 3.x)

You also can configure specified video for autoplay by click "Edit" button link on each video item.

We will consider your solution for disable autoplay if use open website on IOS device.

thanks so much.

Share this post


Link to post
Share on other sites

Is there any way to this in css? Like

@media screen and (max-device-width: 800px){

.html5-main-video {

autoplay: false !important;

}

or something like that?

Share this post


Link to post
Share on other sites

Oh.

CSS can't not control this.

Please try this solution.

Open file /mod_bt_backgroundslideshow/tmpl/js/default.js

Change this function

function onPlayerReady(event) {    
if ($B('#cp-video'+ activeContainer).is(':hidden') ) {
var autoplay = $B("#play-pause-btn"+activeContainer).attr('rel');
if(autoplay == 1){
replayVideo(activeContainer);
}
}
ready = true;
}

to new

function onPlayerReady(event) {    
if ($B('#cp-video'+ activeContainer).is(':hidden') ) {
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if(!iOS){
var autoplay = $B("#play-pause-btn"+activeContainer).attr('rel');
if(autoplay == 1){
replayVideo(activeContainer);
}
}
}
ready = true;
}

I hope it help you

Share this post


Link to post
Share on other sites

initial test works on ios - thanks. I think that's a much better solution for this module making video it more compatible / user friendly with ios.

Share this post


Link to post
Share on other sites

Oh.

CSS can't not control this.

Please try this solution.

Open file /mod_bt_backgroundslideshow/tmpl/js/default.js

Change this function

function onPlayerReady(event) {
if ($B('#cp-video'+ activeContainer).is(':hidden') ) {
var autoplay = $B("#play-pause-btn"+activeContainer).attr('rel');
if(autoplay == 1){
replayVideo(activeContainer);
}
}
ready = true;
}[/CODE]

to new

[CODE]function onPlayerReady(event) {
if ($B('#cp-video'+ activeContainer).is(':hidden') ) {
var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );
if(!iOS){
var autoplay = $B("#play-pause-btn"+activeContainer).attr('rel');
if(autoplay == 1){
replayVideo(activeContainer);
}
}
}
ready = true;
}[/CODE]

I hope it help you

I try this new code but no luck!

iOS and firefox still failed to autostart my youtube video.

Any other ideas?

Best regards,

Stef

Share this post


Link to post
Share on other sites

Sorry my bad!

My youtube background wil not start auto on "desktop firefox" and iOS devices.

So is there a solution for this?

Because the slider is awesome!

Best regards,

Stef

Share this post


Link to post
Share on other sites

If you added my code above to the file, the video has never auto started on iOS

It is used to fix problem on iOS.

We should disabled auto start on iOS devices.

And if you configure the module to auto start video, but on desktop it doesn't.

Please give me your URL. I will check it out.

Thanks.

Share this post


Link to post
Share on other sites

www.sesamsensation.nl

Only on Ipad, Iphone and firefox desktop the youtube autostart won't work!

Every other device it's working excellent.

Thx for your time!

Stef

Share this post


Link to post
Share on other sites

Hi Stef.

As i said, and as Jacob and me discussed, on IPhone, IPad or other iOS device, they use quicktime player instead of flash player, so Video Background doesn't work correctly, special auto start video.

So solution is disable auto start video on iOS device.

And i gave my code.

Now, i must say one more time, on IPhone, IPad can't start video auto.

With your case, on IMac, i can't test it because we don't have this device, in worst case, this device is same with iphone, ipad. It can't start video auto.

I'm sorry

Share this post


Link to post
Share on other sites