Question

Update below…

Ok, ive got a problem here. Im using this excellent vimeo class to make my life easier:
http://www.josh-ho.com/vimeo-class/
(source code here: http://labs.josh-ho.com/vimeo/Vimeo.js)

i use it together with the fitvids.js, which is sooo great, found here:
http://fitvidsjs.com/
(source code here: https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js)n

problem is, in firefox (OSX, havent tried WIN yet, but probably will, too) it breaks the vimeoAPI as soon i use fitvids.js, so i cant get events or tell Vimeo.js to play the video, nor stop it. Works as expected (and wanted) in Safari, though…

i know it must have sth to do with the fact that the fitvids.js puts my div (in which my object swf player is in) in another div:

Before:

<div id="flashposition">
<object width="1280" height="720" type="application/x-shockwave-flash" 
id="flashpositionmyFlashID" data="http://www.vimeo.com/moogaloop.swf"><param 
name="swliveconnect" value="true"><param name="fullscreen" value="1"><param 
name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true">
<param name="wmode" value="transparent"><param name="flashvars" value="clip_id=35083232&
amp;server=vimeo.com&amp;show_title=false&amp;show_byline=false&amp;show_portrait=0&
amp;fullscreen=true&amp;js_api=1&amp;js_onLoad=vimeo.vimeoLoaded&amp;color=00adef&
amp;wmode=transparent"></object>
</div>

After:

<div id="flashposition">

**<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">**

<object width="1280" height="720" type="application/x-shockwave-flash" 
id="flashpositionmyFlashID" data="http://www.vimeo.com/moogaloop.swf"><param 
name="swliveconnect" value="true"><param name="fullscreen" value="1"><param 
name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true">
<param name="wmode" value="transparent"><param name="flashvars" value="clip_id=35083232&
amp;server=vimeo.com&amp;show_title=false&amp;show_byline=false&amp;show_portrait=0&
amp;fullscreen=true&amp;js_api=1&amp;js_onLoad=vimeo.vimeoLoaded&amp;color=00adef&
amp;wmode=transparent"></object>
</div>

**</div>**

in Vimeo.js is a function

XXX.play.video(); 

which calls

vimeoAPI.api_play();

And vimeoAPI is defined as:

vimeoAPI = document.getElementById( vimeoContainer ).getElementsByTagName( "object" )[0];

vimeocontainer id say is in my example the div id “flashposition”.

So my guess is that it cant access the api because there is this new div with class=”fluid-width-video-wrapper”.

So how do i have to change vimeoAPI to get it working again (if this is the culprit)?

Many, many thanks in advance!

Update

The code works now in Firefox, but only if I leave the page to a different URL (by staying in the same browser window) and then pressing the back button. then everything is working and the vimeo API up and running.
But how do I fix this now?

Heres the updated code that got me that far:

fitvids expects pure width and height, not with px added. So I stripped that from the Vimeo.js code in line 137-138, resulting in:

playerWidth = ( width.toString().search( 'px' ) != -1 || width.toString().search( '%' )     
!= -1 ) ? width.toString() : width;

playerHeight = ( height.toString().search( 'px' ) != -1 || height.toString().search( '%' 
) != -1 ) ? height.toString() : height;

Then I changed lines in

this.vimeoLoaded = function() {
var NEWcontainer = vimeoContainer + "NEW";
$('.fluid-width-video-wrapper').attr('id', NEWcontainer);
$(document.getElementById( vimeoContainer ).getElementsByTagName( "object" )).attr('id', 
NEWcontainer);
container = NEWcontainer;
vimeoAPI = document.getElementById( vimeoContainer ).getElementsByTagName( "object" )
[0];
setupAddEventListener();
jQuery(document.getElementById( vimeoContainer )).fitVids();
dispatchEvent( this.VIMEO_LOAD_COMPLETE, null );
}

and finally called Vimeo.js class as normal:

var vimeo;
vimeo = new Vimeo( "flashposition", 1280, 720, "vimeo", showTitle=false);
vimeo.loadVideo( '35083232' );

vimeo.addEventListener( vimeo.VIMEO_LOAD_COMPLETE, video1Loading );

function video1Loading() {
vimeo.playVideo();
}

This way it “works”, but again, only when pressing the back button… 🙁

Answer 1

Initialize fitvid before vimeo (since it changes the DOM) and initialize vimeo on the new inner div.

$(document).ready(function() {
    var $div = $("#flashposition");
    $div.fitVids();

    // grab the new div and give it an id (for vimeo to find)
    var vimeoID = 'vimeoPlayer';
    $div.children('div.fluid-width-video-wrapper').attr('id', vimeoID);

    // vimeo is not a jquery plugin and searches DOM by id
    var vimeo = new Vimeo(vimeoID, 480, 320, “vimeo”);

    //....

    vimeo.playVideo();
});