Anythingslider – Youtube video problem.

[Mitchell]

I am using the anythingslider on a project, as the client wants both images and video in the slider – this seems the perfect solution. However, I am having a bit of trouble with the video side of things.

If I use the old embed code provided by Youtube (object embed), then it works as I want in terms of pausing the slideshow until the video is complete. But on my iPad (client would like it fully compatible), the Youtube videos don’t get hidden when they are ‘slid’ out of view. (this also happens on the demo page for the slider on my iPad). They slide across the page until they are out of the viewport.

If I use the new iframe embed code, the slider functions perfectly on the iPad, but won’t pause while the video is playing and also the video goes to a blank black screen after the first time it is in focus on the site.

Can anyone come up with a solution to fix an issue with either type of video embeding?

Thanks.

[Vergezogt]

I’m really looking forward to the solution of this problem.
Only thing i know is that to make it work on ipad you should really use the iframe code and not the embed.

[Mottie]

Hi Mitchell!

As Vergezogt said, only the iframe code will work on iOS devices because of Apple’s non-support for flash. I’m not sure how to fix the hidden embeded video still showing up… it only seems to happen on Safari.

I don’t own an iPad/iPhone so I can’t tell you why the videos aren’t pausing, but just to make sure… you are using the latest version of AnythingSlider and loading the video extension? Does the demo work for you on an iOS device? I haven’t gotten any feedback on the video extension since its release so I would appreciate some information.

[Mitchell]

Thanks for your replies.

The strange thing is that the videos still work with the embed code on the iPad – I think it is something that is set up between iOS and Youtube where it converts it to HTML5 or iFrame? – This may be the reason behind the video not hiding when it should be ‘out of view’?

Yep, latest version of AnythingSlider and loading the video extension, everything is there! Like I say, the videos will play on any iOS device, but they don’t get hidden when they are not the active slide.

I think I will leave it in the iframe format for now, as at least this ‘looks’ like it works better on both devices, just the video preview doesn’t stay up. There is a long timescale on this project so hopefully there is a fix soon!

Thanks again,
Mitch

[Mottie]

Hi Mitchell!

That is odd, what embed code are you using? I do know that the iframe code does use flash in the background but inside the iframe, it’s their method of getting around the iOS no flash issue.

The only solution I’ve found is to hide the video/iframe when not in view. The “nicest” method is using fadeOut and fadeIn. But this really isn’t ideal as hidden videos will reset so when returning to the slide, the video will not continue playing, but appear as if it is newly loaded. Maybe it’ll work for you…. here is the code I used, and a demo.

$('#slider').anythingSlider({



// Callback when the plugin finished initializing

onInitialized: function(e, slider) {

slider.$items.not( slider.$currentPage ).find('iframe,video').fadeOut();

},

// Callback before slide animates

onSlideBegin: function(e, slider) {

slider.$currentPage.find('iframe,video').fadeOut(slider.animationTime);

},

// Callback when slide completes - no event variable!

onSlideComplete: function(slider) {

slider.$targetPage.find('iframe,video').fadeIn(slider.animationTime);

},



});

[jen_squared]

I had the same problem and came across this post. I used the iPad detection script available from http://davidwalsh.name/detect-ipad, to load the correct youtube code for the browser and it worked a treat. Just a workaround until I have enough time to fix my problem properly. Hope that helps.

[Author]

Posts