Page 1 of 3

new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 2:10 am
by justdrew
I haven't changed the standard youtube embed BBcodes yet, but want to test out this new code for a bit first. Works the same as the old, just put the video id between tags like this:

Code: Select all
[test_yt]M0B62FeCLgU[/test_yt]


The idea here is to not load the video objects unless they are clicked on, while still showing a preview and title for what the video is. This should speed up things on video heavy pages. This was one of the recent improvement ideas. (and I got jelous of boing boing's new snowy video links, I can probably get our own snow like effect and play icon overlayed on the preview image, but this is enough for now.) and it didn't take stringing crap out over multiple external js files, css sheets, etc. :P

Here's two examples:

youtube video


youtube video



Try posting some more in this thread and lets see if it breaks at all.

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 2:19 am
by justdrew
a test flood

youtube video


youtube video


youtube video


youtube video


youtube video


youtube video

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 2:29 am
by justdrew
fyi - one minor bug...

once a video is playing (because you clicked on it) if you click again to the right of the video while still withing the post body area, it'll restart the video from the beginning. I've just got to tighten up the hot zone of the containing div, but not tonight.

never mind, this is fixed already.

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 2:33 am
by Elvis
youtube video

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 2:41 am
by justdrew
thanks elvis :thumbsup

let me know if it misbehaves in anyone's browsers :wink:

seems to work fine in firefox, chrome and IE10, not tested anything else.

looking to hear about the mobile experience particularly.

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 9:44 am
by NeonLX
youtube video


youtube video

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 10:56 am
by compared2what?
youtube video

fly home baby

PostPosted: Wed May 29, 2013 11:09 am
by IanEye
*

youtube video


Image

babble on...


*


is there any way to make them "center"? thanks!

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 6:36 pm
by Laodicean
youtube video

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 6:41 pm
by Project Willow
What's with the hr's? No likey. Otherwise, shorter load times, good.

Re: new expirimental youtube embeding code...

PostPosted: Wed May 29, 2013 11:24 pm
by Allegro
Hi, Drew. Thanks for the experimentations. As long as the standard [youtube] button is not removed or altered, then the formatting I use sometimes to minimize a video for allowing text wraps will do fine. I like my experimentations, too :).

Thanks.
~ A.

Re: new expirimental youtube embeding code...

PostPosted: Thu May 30, 2013 2:08 am
by justdrew
ok ALL behavior of the old is replicated in the new (I think).

you can center them (or put them to right if you like) and the img-left img-right bbCodes work fine with them. Thanks for reminding me to check on that Allegro.

All three youtube BBcodes have been updated to the new code...
Code: Select all
regular: [youtube][/youtube] . big: [youtube2][/youtube2] . small: [youtube3][/youtube3]


please do not use 'test_yt' anymore

(we can revert back if need arose)

next I'll be seeing if I can get some nice image stacking going and overlay a play button (lower left corner I think) and a light animated 'tv snow' pattern to give additional headsup that these are interactive. (though cool, that may ultimately not be desirable, some of these youtubes have nice preview pictures.


let me know if anyone has any trouble.

Watch if sometime the title text at the bottom is blank, not sure what happens if youtube is slow to dish the xml info out. Still looking into that. But I've not seen a single issue with it so far.

Re: new expirimental youtube embeding code...

PostPosted: Thu May 30, 2013 2:30 am
by Project Willow
Now what's with the borders?

Please work with me JD.

Re: new expirimental youtube embeding code...

PostPosted: Thu May 30, 2013 3:11 am
by Allegro
Drew, you see, [youtube3] forces the youtube title to dominate the remaining design. In this case, the title is too long.

    This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day.

Re: new expirimental youtube embeding code...

PostPosted: Thu May 30, 2013 5:51 am
by justdrew
yeah, I have that fixed in a newer version of 'enhanced youtube embeds'

(and made a test_yt3 to test with... see here:

Allegro ยป 29 May 2013 23:11 wrote:Drew, you see, [youtube3] forces the youtube title to dominate the remaining design. In this case, the title is too long.

youtube video
This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day. This is a very fine day.