Pages

Sunday, February 26, 2012

33

Youtube videos lazy load, improved style

I styled my previous youtube lazy load hack a bit so that the video description text is easier to read. Before it looked like this (this is an image, so no hover effect):


HTML needed to produce this is:
<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>
With the new style, it looks like this (actual embed):


Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.


This script is installed on this blog.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

33 comments:

Beben Koben said... [reply]

WOW...
Just put link, no embed can show display video...
Ck...ck...ck \m/

MS-potilas said... [reply]

@Beben Koben

(here is the link correct:
YouTube )

Hi,
yes it is similar. But there are two major differences:

- I use link element, so if Javascript is not enabled, user can still click it and display video. If use <p> then user has to copy the link manually
- My script lazy loads the videos/embeds. That is, the actual embed is made after user clicks on the link, not on page load. Before clicking it is just a link with youtube video image as background + play button :)

Beben Koben said... [reply]

hihihihi my link false :P
oo so the difference...ic ic

maverick said... [reply]

Hi,
I tried lazy load on my blog using your code. My problem is that when I click to play an embedded youtube video, the video does not play on the webpage but it totally redirects to youtube and starts playing after that.
I copied all your codes right and I try to figure out which part could I have done it wrong.

MS-potilas said... [reply]

@maverick Hi, the best way to copy code from Pastebin in this blog is to click the "Download Raw" link and copy from the window/tab that opens.

maverick said... [reply]

@MS-potilas
I did what you said and still, the same thing happens. I think I've copied everything right.

Could this have some thing to do with the youtube video itself?

Irfan Suleman said... [reply]

what if youtube video url is been shortern like

http://youtu.be/ebSZOlCnXq0

work well for normal url but in case of shortern won't work.. pls help

MS-potilas said... [reply]

@Irfan Suleman
Hi, I updated the source code, line number 13 is new. Now the script handles also youtu.be urls. :)

Btw if you want red play button when hovering over the video image, a bit like YouTube has nowadays, you can use the following image: http://lh4.googleusercontent.com/-ywkTvQ4VohA/T455cg8_PRI/AAAAAAAAAq4/qfUJoK13InI/s800/youtube-play-button-hover-red.png just change the image url in .youtube-lazy-link-div:hover style.

Astuces Finder said... [reply]

http://www.youtube.com/watch?v=jg7Uo1xphrU&list=UURbCg3IBdIxCS4e9HEdhMKA

JFDP13 said... [reply]

Hi! Your code for embed videos on Blogger is great! It works quite fine! Commenting on this "lazy load", it looks interesting... but i don't know very well how to customize it like i want to! This is how i want it to look like-->[link]

You know, i'm a drawer not a programmer! So even if i already had to learn a lot of things to materialize my designs, i'm just a begginer in these aspects! I experimented with this a little, and i only achieved a transparent background... so... can you help me a little?

Details:
I just want a plain color for the bg, nothing more, meaning that you don't know what the video is about till you click it. That's something i always wanted. For the player button, just what you see.

Other thing i want to ask you: I can make every embed youtube video (all embed videos maybe?) look like that? (applying lazy load to them all, i mean)... That would be GREAT.

Well, that's it.
THANK YOU for this great tool anyway, man!

MS-potilas said... [reply]

@JFDP13
Hi, if you install both lazy load videos and videos in comments, you may be able to achieve what you want. It does require customization, you could try this:

In lazy load, search for string " url(http://i2.ytimg.com/vi/"+youid+"/0.jpg) center center no-repeat" without quotes, and remove that.

In videos in comments, search for string " url('+resp.thumbnail_url+') center center no-repeat" and remove that.

In videos in comments, search for string "<b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small>" and remove that.

I really did not test these, so I'm not 100% sure how they work. I rarely make customized "one blog versions" of my hacks, I try to target larger audience, and preferably leave the customizing to those who want the customization. Unless it is just something simple, just one or two lines. Hope these tips worked.

JFDP13 said... [reply]

@MS-potilas
FFFFFFFFFFFFFFFFF- Yeah! It works!
But what about appliying lazy load for all the embed videos? Can be that possible? I would LOVE to see that in my blog! ...I mean, automatically, without having to do what you say with the embed code (if it's possible in comments... why not in posts?). That would definitely better (o lazier)!

Last thing: It's possible to make comment's embed videos repeat and stuff like that?

Well, thanks again man. People like you are who made me keep working.

MS-potilas said... [reply]

@JFDP13
Hi, that should be possible, too, so you would only need to put youtube urls in your posts.

There's now line:

$(".comment-content,.comment-body,.comment-body-author").each(function() {

try changing that to:

$(".comment-content,.comment-body,.comment-body-author,.post-body").each(function() {

That turns youtube urls into lazy loading embeds in both comments and post texts.

MS-potilas said... [reply]

@MS-potilas
The line to be changed is in the Youtube Embeds in Comments hack, not in this lazy load hack. :)

JFDP13 said... [reply]

@MS-potilas
Yeah! It works too!
Now, 3 final thingies:

-I just thought... For aesthetically purposes, it can be possible to make youtube urls "invisible". In post, of course, you can give to the url the bg color, but in comments... Now i ask: Is possible to "color" all of these links automatically?
-Can be possible to give to posts' embed videos a certain max-width (640) and for comments' ones, another (570)? You know, in the hack code.
-Is possible to make repeat, not showing related videos, and all these things with lazy load? (adding &rel=0 in the urls, for example)

Again: THANKS THANKS THANKS

JFDP13 said... [reply]

@MS-potilas
Sorry for instigate, but the second point is the important one... You are free to not reply the other 2, but please, reply the second one!

JFDP13 said... [reply]

@MS-potilas
Oh, i observed something now... With lazy load, Youtube embed video shows a "full screen" icon, but i doesn't work. In a normal Youtube embed video it doesn't even appear... Mm...

MS-potilas said... [reply]

@JFDP13 Hi, and sorry for the late answer, I've been away this week on a trip to northern Finland.

About the widths, you can try something like this. Now there is (in the lazy load hack):

oembed_yt(url, $(this).width(), callID++);

You can try change that to:

oembed_yt(url, $(this).hasClass("post-body")?640:470, callID++);

The second parameter to oembed_yt specifies the width, and that line gives width 640 to post videos and width 470 to others.

Adding rel=0 automatically and other stuff would need some bigger changes.

I checked the full screen option, but it did work, for example here: yabtb-demo1.blogspot.com/2012/02/easy-embed-youtube-videos-in-comments.html

JFDP13 said... [reply]

@MS-potilas
I think full screen thing it's because some users had disbled it or something... In some videos it works, in others don't.

And... THANK YOU again! Now it's perfect!
Don't worry for the late reply.

JFDP13 said... [reply]
This comment has been removed by the author.
JFDP13 said... [reply]

I found a bug! When you put more than 2 identical video URL, this happens-->http://i.imgur.com/NK9tT.png

MS-potilas said... [reply]

@JFDP13
Hi, thanks, I had not thought of that. I did a quick fix, two lines were changed, line #35 and line #40. On both lines youid was changed to youid+index.

JFDP13 said... [reply]

@MS-potilas
Still same problem!
http://i.imgur.com/Q1OFA.png

MS-potilas said... [reply]

@JFDP13
Ok, now I got it, the bug is actually in the "embed youtube videos in comments" hack which you're using and which in turn uses this lazy load. The code to replace the urls with (lazy) embed code could be better, i think it messes up the html. I'll see if I come up with something.

MS-potilas said... [reply]

@JFDP13
Now I've got the fix. I replaced the fishy code with some more fishy code :)

lines 45-49 were:

htmlx = html.replace("[" + oetagname + "="+resp.url+"]", " " + resp.url + " ");
htmlx = htmlx.replace("[" + oetagname + "="+resp.url+" ]", " " + resp.url + " ");
htmlx = htmlx.replace('"'+resp.url+'"', '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(resp.url, '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
htmlx = htmlx.replace('"'+revurl+'"', '"'+resp.url+'"'); // trick to preserve href="url"

replace them with:

htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");
htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"'); // trick to preserve href="url"
htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')
htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+resp.url+'"'); // trick to preserve href="url"


The source code is also updated in the article Allow users embed YouTube videos in Blogger comments.

JFDP13 said... [reply]

@MS-potilas
It works! Thank you very much~~

DoujinOST said... [reply]

Hi , I read some comments here and some said just put youtube link and it automatically changed into watchable video

In my case , it doesn't work!
I already applied the script for my blog

What am I missing?

DoujinOST said... [reply]

@DoujinOST

Never mind , found the missing part.
Ok , last question , my post won't show the thumbnail of the video unless I use embed code (without lazyload). Could you perhaps adjust it? Your code made my job more simple to share videos! :)

MS-potilas said... [reply]

@DoujinOST
Hi, it seems that you're now using some other hack to transfer the urls to iframes. This lazy load hack is a bit different, here you need to have the <a> element with the proper class, just an url won't be enough. I suggest you ask from the source you got the script you're using now, maybe there is some error in installation. Hope you get it working. :)

DoujinOST said... [reply]

@MS-potilas

Thanks for reply
I can give you the code if you want because the blog where I found the script are closed.

MS-potilas said... [reply]

@DoujinOST
Hi, I'd rather not try to fix code from others :) But I just tried a small modification to my Allow users embed YouTube videos in Blogger comments. So you could try installing that, then you'll get videos in comments just by putting youtube url there. Then find line #73:

$(".comment-content,.comment-body,.comment-body-author").each(function() {

and change it to:

$(".comment-content,.comment-body,.comment-body-author,.post-body").each(function() {

After that youtube urls in post texts will be turned into embeds, too, like in the comments.

You can additionally use this lazy load hack there, too, it might speed up page loading time. But it is not necessary.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: