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.
Post Comments (Atom)
Click on a single comment to hide/show its text
31 comments:
WOW...
Just put link, no embed can show display video...
Ck...ck...ck \m/
@Beben Koben Similar like this master YouTube
Here demo Demo.
@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 :)
hihihihi my link false :P
oo so the difference...ic ic
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.
@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.
@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?
@MS-potilas It's working now thanks
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
@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.
http://www.youtube.com/watch?v=jg7Uo1xphrU&list=UURbCg3IBdIxCS4e9HEdhMKA
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!
@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.
@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.
@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
The line to be changed is in the Youtube Embeds in Comments hack, not in this lazy load hack. :)
@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
@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!
@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...
@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
@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.
I found a bug! When you put more than 2 identical video URL, this happens-->http://i.imgur.com/NK9tT.png
@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.
@MS-potilas
Still same problem!
http://i.imgur.com/Q1OFA.png
@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.
@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.
@MS-potilas
It works! Thank you very much~~
@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
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.
Hi - I know this is a brilliant hack, and I have been using it for a while. However, recent Firefox upgrades have apparently "broken" it. Now, when I click on the lazy load image embedded in my blog, the entire thing just disappears, leaving a blank space instead of opening the actual YouTube video! Is there a fix for this?
I'm on Windows 10 and Firefox version 54.0.1 (32-bit) [I "downgraded" from 64-bit to 32-bit a few months ago and that seemed to resolve the issue, but now the latest automatic update has undone my fix - should I just "downgrade" again?]
See the hack to make the 'Post a Comment' link bigger.
Post a Comment