Video embedding on mobile not working

Permalink Browser Info Environment
The video embed codes from Vimeo normally work just fine on my old templates when I view them on an iOS device, but they no longer work when I place them in Madfolio.

Here's a page where I've tried a few different ways of embedding, both through the Madfolio video embed and an HTML block.

http://designerdan.com/test-home/i-feel-fantastic...

versus the old template which still works in iOS:
http://designerdan.com/portfolio/video/fantastic-music-video...

Any ideas how I might be able to get the embedded videos to function in iOS when using Madfolio?

Thanks!

~Designer Dan

Type: Discussion
Status: New
designerdan
View Replies: View Best Answer
marcantondahmen replied on at Permalink Reply
marcantondahmen
Hello,

apparently only some videos are affected by that bug. I couldn't reproduce that problem and also the showcase site plays Vimeo videos on iOS devices just fine. But of course I see that that is not the case on youre site.

Searching for that issue on Google revealed, that there are a lot of issues with Vimeo and iOS. The Vimeo API states, that videos must be embedded into elements which are visible at the moment the video starts loading to avoid issues with the play/pause buttons (but as i said only for some videos).
But the theme first hides all "bricks" for preloading to avoid flickers when re-layouting after all elements loaded successfully. Since you don't hide and fade in your videos on your old site, your old site doesn't have that bug.

Vimeo also states in their forum that they are aware of that bug and they are trying to resolve that issue asap, but I wouldn't count on that.

So the problem is not caused by the theme itself. Basically all themes with JavaScript preloading will have that issue.

Anyways I think there are some options you can try to get around that problem:

1. Try to disable the initial hiding of the iframe via CSS, for example: (a bit dirty and untested, but might lead you into the right direction)
div[id*="container"], .isotopeItem {
    display: block !important;
}


or

2. Simply re-upload the video to Vimeo without generating a mobile version (not needed anymore on iOS 6+), because, like mentioned before, only some videos are affected.

If mobile devices are important for you, you should also consider hosting videos somewhere else like YouTube, because the Vimeo mobile player apparently causes many problems and is quite unstable.

Hope that helps...
designerdan replied on at Permalink Reply
designerdan
I tried placing that code under the "customize theme/additional css" where it sort of worked, but also causes other significant problems with the behavior of the website.

YouTube isn't an option, as their aggressive advertisements are unsuitable for a portfolio site.

If there's a way to add this to just the content block, I haven't figured it out.

Is there a way to disable the hiding in the theme itself? Perhaps that may be less messy, and it would allow me to create an alternate version of the theme for mobile use.
marcantondahmen replied on at Permalink Best Answer Reply
marcantondahmen
I updated the theme to handle Vimeo videos in a more stable way. You can apply the update in your dashboard > add functionality. Your videos should work now again on all iOS devices as expected.
You can remove the custom CSS again.

Cheers!
designerdan replied on at Permalink Reply
designerdan
Brilliant! It works great. The day is saved!

Thank you!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.