Running videos with Flexsilder and issues to be pointed with iframe

Flexslider become one of the most popular jquery based slider for its lots of options, content based support and also for responsive. I'm gonna here to discuss some key points about running videos with Flexslider which needs to be pointed to avoid JS errors and for smoothness.

For vimeo video, we use froogaloop js file, there is a updated file for this, try to use updated one and always add this JS file at the end of the html file.

For youtube video in firefox browser, sometimes nav arrows don't show and other css issues, try to use 'wmode=transparent' at the end of the iframe src.

Iframe should not be hidden at first by 'display:none', this can be in a case that we want a play button to be clicked on this and to play the video, and the iframe is hidden at first. so hidden iframe can cause error like 'value not an object' or so on.

Use 'enablejsapi=1&verson=3' to use it with youtube player API.

For youtube player API, always try to read first its document(https://developers.google.com/youtube/js_api_reference) and get idea as well as other issues.

To play a youtube video, the easiest and also the dirty! way is to add 'autoplay=1' at the end of the iframe src like below:

$('videiID')[0].src += "&autoplay=1";

We can also use a simple function 'callplayer()' to control youtube iframe as shown here(http://jsfiddle.net/g6P5H/) or discussed here(http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html) .

Some useful links about youtube and vimeo API with Flexslider :
https://github.com/woothemes/FlexSlider/issues/346#issuecomment-13826530,
http://daigo.org/2012/11/learning-flexslider-api

So, above points can reduce your hassle for JS erros or others.

Happy coding!