I am running on Localhost and don't have a link to show you online. Everything works fine with the site locally if I embed Youtube videos the normal way. The thumbnails render fine and the video plays. So, it's shaking hands okay with Youtube's website.
Here is what Firebug sees in the Browser for the thumbnails generated by addVideoThumb:
<div style="max-width:180px;">
<a id="fb_2" class="floatbox" data-fb-options="width:853 height:480 addPlayButton:small addVideoThumb:small" href="http://www.youtube.com/watch?v=pkE5PYAwEcg">
<span id="fb_4" class="fbWrapper" style="background: none repeat scroll 0% 0% transparent; border-collapse: separate; border-spacing: 0px; border: 0px none rgb(51, 51, 51); border-radius: 0px 0px 0px 0px; bottom: auto; box-shadow: none; caption-side: top; clear: none; clip: auto; color: rgb(255, 255, 255); content: none; counter-increment: none; counter-reset: none; cursor: pointer; direction: ltr; display: inline-block; empty-cells: show; font: 400 13px/21.45px 'Open Sans','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif; height: 336...ective-origin: 50% 50%; -moz-backface-visibility: visible; -moz-transform-style: flat; -moz-window-shadow: default; -moz-text-blink: none; -moz-text-decoration-color: rgb(255, 255, 255); -moz-text-decoration-line: none; -moz-text-decoration-style: solid; -moz-transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ; pointer-events: auto; -moz-tab-size: 8; resize: none; -moz-animation: 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s normal none 1 none; -moz-animation-play-state: running; -moz-text-size-adjust: auto;">
</a>
</div>
Notice the code is broken right about after the height is defined here:
height: 336...ective-origin:
Not sure if that's normal.
And here is my actual HTML code inside the page.
<div style="max-width:180px;"><a class="floatbox" href="http://www.youtube.com/watch?v=pkE5PYAwEcg" data-fb-options="width:853 height:480 addPlayButton:small addVideoThumb:small"></a>
</div>
I have tried specifying a pixel dimension of 180px for addVideoThumb and that fails as well.
You will note that I made a wrapper Div around the Floatbox anchor trying to force the thumbnail down. This was a workaround attempt to force the thumbnail down to 180px wide. It worked in IE and failed in Firefox. See screen captures. If I remove the wrapper Div, IE also renders addVideoThumb full size at 480 pixels wide. I've tested this in the following Browsers and they all exhibit the same behavior if the wrapper Div is removed: FF 11, FF 20 & IE 8
Everything else perfoms as planned. When the Floatbox addVideoThumb is clicked, the video opens fine in a Floatbox window and all of the sizing options and captions are recognized inside the Floatbox window. The inside dimensions of the Floatbox window are 853 pixels wide and 480 tall as specified in the code.
And finally, I have tried this with multiple versions of Floatbox thinking I might have corrupt files. Same issue with all downloads. Browser cache was cleared, although I didn't flush the DNS cache with a command prompt.
Is there a option to hard-code the thumbnail dimensions other than hosting up thumbnail jpgs on the server?