addVideoThumb resizing issues V 602

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 56
I am experiencing some Youtube video thumbnail resizing issues with Floatbox V 6.0.2

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 &#039;Open Sans&#039;,&#039;HelveticaNeue&#039;,&#039;Helvetica Neue&#039;,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


User posted image

User posted image

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?
Administrator
Registered: Aug 2008
Posts: 3382
I dunno. :)

1. YouTube is acting up right now (at least over my international network connection), interfering with my testing. Most of the time the youtube thumbnails won't load for me, with the youtube servers immediately resetting the connection and returning no data. Every now and then the image trickles through.

2. The ... in the Firebug style is just it's way of saying "yadda yadda, there's more here than I can show on the line so I'm clipping some out of the middle". Floatbox copies all the effective styles from the parent link to the wrapper span, so that's why there's so many on there. Harmless.

3. On the rare occasions when youtube succeeds in coughing up the thumbnail, it is displayed at the requested size of 120x90. This is true in IE and Firefox - with and without your wrapping div around the anchor. This suggest to me that there may be something in the styles on your localhost page that's modifying the size. This is just a wild guess and I have no way of knowing why it's behaving differently on your page as compared to mine without being able to see your page.

4. Specifying a size as the addVideoThumb option value is a great way to get the thumbnail sized to what you want, and it always works as advertised for me in all my tests. Another approach to sizing a fetched thumb is to stick a blank.gif thumb in there and size that to the final width and height dimensions. Floatbox will pull the addVideoThumb width from the blank.gif thumb, and will replace that thumb when the real one arrives. The advantage of this approach is that the link is sized properly on the page when it is first drawn and so the page doesn't jump around and doesn't need to have its layout recalculated to place the thumbnail. This capability is not in the docs because it had too much potential to make readers say "Huh???".

The wrap up:

YouTube may be acting up right now, but if so it should just fail to send the image and these failures don't account for the wrong sizing.

There must be something on your page that's forcing the sizing. The same quoted links don't have a sizing problem on my test server. Perhaps you could pick through the styles in Firebug to figure out what's going on. Or perhaps you could push a page up to where I can see it and I can figure out what's going on.
Member
Registered: Apr 2009
Posts: 56
Thanks for your reply back. As always, a thorough and fast response!
TY.

The blank gif route is what I was hoping to hear about. A more detailed reply I sent by email.

Cheers
Member
Registered: Jul 2011
Posts: 43
This is probably what is happening to me also.

The videothumb is not working on Chrome.

It works on Firefox, Opera and IE, go figure!

http://floatboxjs.com/forum/topic.php?id=1824
Administrator
Registered: Aug 2008
Posts: 3382
Oops, sorry, I followed up with jatss via email on this problem but neglected to post the final results to this thread. There were two problems on his WordPress page.

1. The box-shadows around the floatbox were appearing as white blotches in IE8. This is a bug in html5shiv.js which was being loaded with the WordPress theme. A bug report was opened at https://github.com/aFarkas/html5shiv/issues/131 but there's no indication as to when they will issue the fixed update. This shadow issue can be avoided by placing the following script before the script element that loads html5shiv.js:
<script> html5 = { shivMethods: false }; </script>


2. addVideoThumb was behaving badly in Chrome and maybe some other browsers. This was a result of max-width:100% being set on all <img> elements in the page css. The video thumbnails were well behaved after adding the following to the page's styles:
.fbWrapper img { max-width: none; }

Page: 1