Last Updated: February 25, 2016
· saif_cse

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 :

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

Happy coding!

Say Thanks

2 Responses
Add your response


Hi! I was wondering if you could elaborate on embedding a vimeo video into flexslider. The old embed code works fine (except it won't work on mobile). When I insert the iframe, it says "the file or directory could not be found". Any easy fixes?

over 1 year ago ·

Hi kailynm,
"the file or directory could not be found" error means your given iframe source has problem i think. Please cross check carefully like 'http', 'https' or the path you given is correct or not. If the source is local, chek that also. Better visit that URL/source first, if it really exists. Finally follow the things i shared and also the doc from Flexslider. Hope you will get solution!

over 1 year ago ·