As an enhancement to the YouTube Popup player tool I built almost 2 years back, I have created a jQuery plugin to display YouTube videos in a popup dialog box. This plugin embeds YouTube video using the latest iFrame code which features both Flash and HTML5 players. To display the popup dialog box I have used the jQuery UI Dialog Widget which provides a robust cross-browser dialog box with title bar and supports a movable box with modal behavior. You can even customize the jQuery UI Dialog Widget theme to suit the color and style of you website.
This is a very easy to use plugin and is flexible enough to be used on any DOM element which supports the JavaScript onclick event. You will just need to include the YouTube Video Id in any of the DOM element attributes (default: rel) and initialize it in the plugin options (if other than rel). You can even provide a Title to the popup dialog box by defining it in the element’s title attribute or plugin options.
This plugin offers many configuration options for the dialog box and YouTube video player. You can find more detailed information for configuration and setup on the demo/documentation page.
For complete demo, documentation and download visit my lab page
http://lab.abhinayrathore.com/jquery_youtube/
Please drop me a word in the comments below if you have any modification/enhancements/bug fixes or any new feature to be added to this plugin.
Changelog
UPDATE v2.3, Date: Feb 26, 2013:
The biggest change in this version is that now you don't need to have the YouTube Id to embed the video links. You can now have regular YouTube URLs in the href attribute and don't need to assign the id in a separate attribute for links. If you want to use other DOM elements like images or buttons, you will still need the Id. This version is backward compatible with the old versions.
Also added a new configuration option:
- cssClass: (default: empty string) Attribute containing the CSS class to be assigned to the popup div.
UPDATE v2.2, Date: Aug 30, 2012: Removed some deprecated parameters from the options list
UPDATE v2.1, Date: May 23, 2012: Added 1 new configuration option:
- useYouTubeTitle: (default: true) Gets the video title from YouTube automatically. This option will not work if the title is overridden using the title option. If set to false, the title will fallback to the title attribute of the element.
UPDATE v2.0, Date: Oct 20, 2011: Added 3 new configuration options:
- hideTitleBar: (default: false) Hide the Title Bar of the Dialog Widget. (Only works with Modal option enabled.)
- clickOutsideClose: (default: false) Closes the Popup Dialog when clicked outside on the Modal overlay. (Only works with Modal option enabled.)
- overlayOpacity: (default: 0.5) Sets the opacity value (from 0 to 1) for the Dialog Widget overlay.
once again awesome script!!! I am struggling with getting the title of video to show up under the title of the player. any suggestions?
ReplyDeletePinball, can you please explain in detail what problem are you facing with displaying the title? (May be with a screenshot).
ReplyDeleteI can manually enter the title= "Sample Video" and that will show "Sample Video" as the title in the popup player just fine. But I need help on is having the popup player title look at the youtube videoid and use the actually title for that video as the title for the popup player. Hope I explianed better?
ReplyDeleteWell, that's not possible right now as this player is only designed to embed the video in a very simple manner. It makes it more complex if we have to go to YouTube first and fetch the actual title. I don't know if that is even possible with the YouTube API, but you can check the API website for more info.
ReplyDeleteWhat you can do it... set the "showinfo" option to 1 in configuration and it will display the actual title on the video itself before it plays.
thanks for the insight, I kind of figured it might not be possible. Again thanks for the awesome script!!!!
ReplyDeleteVery cool and it works great!
ReplyDeleteExcept,
I cannot get fullscreen to work. The icon control is there but it does not work. I saw the help on parameters by YouTube but cannot figure out how to change the files you gave us:
fs
Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button in the embedded player and does not affect the chromeless player. The fullscreen option will not work if you load the YouTube player into another SWF. Note that you must include some extra arguments to your embed code for this to work. The bold text in the following example is required to enable fullscreen functionality:
param name="allowFullScreen" value="true"
allowfullscreen="true"
Anonymous,
ReplyDeleteThe problem with full screen is because of the browsers implementation of the HTML5 video features. Here is more info about it: http://www.youtube.com/html5
As a temporary fix, you can use the "Popup with Browser width and height" option in the Examples section.
To get full screen working, the script should be modified to use the embedded url structure:
ReplyDeletehttp://www.youtube.com/embed/
Instead of:
http://www.youtube.com/v/
Also, for mobile platforms;
ReplyDeleteIf the script detects a mobile platform (iphone/ipod/android/etc.), it should abandon using a modal window and link (eg: window.location ) to the video directly using the http://www.youtube.com/v/ url. The mobile platform should then detect the youtube url and handle the video correctly.
Thanks for the tip Anonymous,
ReplyDeleteI've updated the script to use the "embed" url.
Regarding the mobile devices, its better if we keep the browser detection outside of the script and assign the popup plugin only if its not a mobile browser. Example:
if(!mobileBrowser){
//assign YouTube Popup Player plugin.
}
Hello ,
Deletethanks for the plugin, very nice!
However I have a problem with the fullscreen. It works perfect in all the browsers but not in Firefox. What could be the problem?
I could have missed in in your documentation, but if mobile detection is outside the script, then it should be noted that the href should be set to "http://www.youtube.com/v/[video id]" instead of "#".
ReplyDeleteHowever, with the number of mobile users our there today, it probably should be just implemented in the plugin -- even if it isn't future proof. Without it, things get ugly very quickly for the mobile user.
Something like:
//Format YouTube URL
var YouTubeURL = youtubeId + "?hd=1&rel=0&showsearch=0&autohide=" + options2.autohide;
YouTubeURL += "&autoplay=" + options2.autoplay + "&color1=" + options2.color1 + "&color2=" + options2.color2;
YouTubeURL += "&controls=" + options2.controls + "&fs=" + options2.fullscreen + "&loop=" + options2.loop;
YouTubeURL += "&hd=" + options2.hd + "&showinfo=" + options2.showinfo;
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
){
//Open youtube url directly for mobile plaforms
YouTubeURL = "http://www.youtube.com/v/" + YouTubeURL;
window.location = YouTubeURL;
return false;
}else{
//Setup YouTube Dialog
YouTubeURL = "http://www.youtube.com/embed/" + YouTubeURL;
YouTubeDialog.html(getYouTubePlayer(YouTubeURL, options2.width, options2.height));
YouTubeDialog.dialog({ 'minWidth': options2.width, 'minHeight': options2.height, title: videoTitle });
YouTubeDialog.dialog('open');
return false;
}
Also, I like to add something like the following to make the title bar look a little better (perhaps there's a better way of doing it):
YouTubeDialog.siblings('div.ui-dialog-titlebar').addClass('ui-corner-top');
YouTubeDialog.siblings('div.ui-dialog-titlebar').removeClass('ui-corner-all');
Thanks for the plugin. It works great in Chrome and Firefox but in IE9 the modal window gets horizontally stretched to the size of the window and video plays on right side and left part is white.
ReplyDeleteThanks,
Alex
Alex, did you try the latest code of this plugin? Also, are you setting different sizes for multiple popups on a single page?
ReplyDeleteHi,
ReplyDeleteJust wondering how I could use this to automatically run a video when the page loads? I am looking to run a short training video when a user logs in for the first time - i detect that in the PHP script from my mysql database and then how do I activate without any user intervention ie no link clicking etc.
Alg, simply click the link using jQuery click event:
ReplyDelete$(function () {
$("a.youtube").YouTubePopup().click();
});
el link está caÃdo http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.htm?920835593
ReplyDeleteis it possible to use youtube player as plugin in asp.net
ReplyDeleteDoes the plugin work for the most recent firefox in Mac OS ?
ReplyDeleteAppears everything black. Thanks
Can someone please post a working example I want to see it in action, I can't seem to make it work. I might be missing something incredibly simple. If I see a live example (besides this page) I think i can figure it out, thanks!
ReplyDeleteAnonymous, try this demo page: http://lab.abhinayrathore.com/jquery_youtube/demo.htm
ReplyDeleteI'm getting scroll bars in the dialog no matter the size of the video nor the size of the screen I set. Any thoughts?
ReplyDeleteThanks in advance!
Whatever it was, it's they're gone now. Thanks for the great post!
ReplyDeleteHi. I'd love to have more control over the title bar. I see Anonymous above said:
ReplyDelete>Also, I like to add something like the following to make the title bar look a little >better (perhaps there's a better way of doing it):
>
>YouTubeDialog.siblings('div.ui-dialog-titlebar').addClass('ui-corner-top');
>YouTubeDialog.siblings('div.ui-dialog-titlebar').removeClass('ui-corner-all');
which works, but only removes the lower rounded corners I believe.
Any chance there might be a list of options for other changes, such as color, 2D/3D, border, etc.?
Mike, this plugin is built over jQuery UI Dialog box so you can use your custom theme to change the color or border for the header.
ReplyDeleteYou can customize your theme with the themeroller on this page: http://jqueryui.com/themeroller/
Thanks! Great work.
ReplyDeleteHi abhinay,
ReplyDeleteI am new to Jquery, i just wanted to know, will it work in .asp pages?
Please let me know.
Thank you
Anonymous, this plugin is jQuery/JavaScript based so it will work with any kind of back-end technology including ASP or ASPX.
ReplyDeleteThank you so much for this. It works great. I do have one question. Is there anyway to make the popup window automatically close after the video ends?
ReplyDeleteAnonymous, no there is no way for the javascript code to know that the video is finished playing.
ReplyDeleteI was the one who posted the question about automatically closing after it is done playing. I have found code that actually does this at this website: http://stackoverflow.com/questions/7853904/how-to-detect-when-a-youtube-video-finishes-playing. The player on that site was embedded, not a popup, and frankly yours looks more sleak, but I am not knowledgable enough in javascript to combine the two codes together. Does your model have the capacity to use any of this code to detect when the video has finished playing and then close the window?
ReplyDeleteAnnymous, I am using the iFrame Player directly to embed the video as it supports HTML5 version. If you check the API reference (http://code.google.com/apis/youtube/iframe_api_reference.html), they clearly say:
ReplyDelete"You should not yet build business-critical applications using this API nor should you launch any applications using this API into a production environment."
So, I'll wait for YouTube to release the final version of this API :)
Hi, i have tried the code in localhost , it works fine in all browser, but when i put into server, it didnt works in IE..i get "Navigation to the webpage was canceled". What shd i do?
ReplyDeletehi
ReplyDeletecan i use this in my blogger!!
Hi, great code and easy to use !
ReplyDeleteStupid question though, how can you change the color of the pop-up bar (blue by default) ?
Thanks !
Anonymous, for changing the color of the pop-up box, you can generate a new custom theme at http://jqueryui.com/themeroller/.
ReplyDeleteWhen I copy paste the demo code, I get the error:
ReplyDelete$j("a.youtube").YouTubePopup is not a function
$j("a.youtube").YouTubePopup({ autoplay: 0 });
i'm using $j for noConflict, but even without that I can't get the demo code to work.
Anonymous,
ReplyDeleteThe demo code is working just fine here: http://lab.abhinayrathore.com/jquery_youtube/demo.htm.
Can you send me the URL to your page so I can look at it?
My mistake. It would probably help if I had copied the youtubepopup.min.js file into the website. Thanks for the response!
ReplyDeleteNice jQuery plugin. However, I am having an issue when running on IE(7,8,9) if I exclude the line at the top of a webpage. The modal window gets horizontally stretched to the size of the window and video plays on left side and right part is white. :p Can someone give me a pointer, as my website cannot have the above DOCTYPE line
ReplyDeleteMine's not working in ie7 only ... only about 7 percent of my client's traffic but, for one, it's what he uses, of course. Any thoughts would be of great help.
ReplyDeleteAnonymous, try this demo page in you IE's and see if it works or not http://lab.abhinayrathore.com/jquery_youtube/demo.htm
ReplyDeleteJust make sure that there is NO blank space or any markup before the <!DOCTYPE ... > tag. Having a blank space before the DOCTYPE tag makes IE7 run in Quirks-Mode.
Getting a Woopra error when I click any link after the YouTube video is shown"
ReplyDeleteMicrosoft JScript runtime error: Object doesn't support this property or method
It is breaking on the woopra line: this.sleep(400);
Any idea?
Dear Abhinay Rathore,
ReplyDeleteThis is very nice but what's the best way of positioning the popup on the page?
Thanks
Clive Betteridge
Greatttt work Abhinay,
ReplyDeletei'm kind of new to all of this but is there a way to execute this player through a Javascript function:
meaning something like youtube('my_id','my title');
Mikey
Mikey, you can trigger the popup player from any JavaScript function like this:
ReplyDelete$("a.youtube").YouTubePopup().click();
Hi Abhinay thanx for the reply and also your kind email.
ReplyDeleteUnfortunately the solution does not work for me.
Let me try to explain what i did (and like to do)
with a simple HTML link a function is executed.
(because of code in this forum i added some extra AA-letters below )
HTML: text link iets
Then DL2()is the function .
with this function i start something and after getting data I start your expression mentioned above:
Example function what i tried without my stuff:
function DL2(){
$("#EjFwN0Gomxg").YouTubePopup().click();
}
above code is then Javascript as you can see, but nothing happens within chrome and with I.E. i get donwload security crap message.
Do you have any idea how to process??
Looking forward to receive some help on this.
ps one on one through email is also possible ;)
Mikey
HTML link unfortunately is not displayed above but works with ''Href'' and then instead of link the function DL2 is executed.
ReplyDeleteMikey
Quick question: how do I change the overlay color to black? Thanks!
ReplyDeleteAnswered my own question. The theme builder is one of the coolest things I've come across in a long time. Another quick question though. When you disable the titlebar, the little X used to close the window disappears with it. Would it be possible to include an option to close the window even though there is no titlebar?
ReplyDeleteThis doesn't work for me. If I copy and paste your demo code into an html file using Notepad, then open it, then click on the 'Test Me' link, it merely appends a '#' to the URL and doesn't display any video.
ReplyDeleteThe same happens if I copy the 'head' part of the demo code into the head section in my blog's html code, and also copy the 'body' part into, say, a sidebar widget. It just appends a '#' to the URL when I click on the link, and does nothing else.
What am I missing?
I have a feeling it's to do with the script src="jquery.youtubepopup.min.js", since it doesn't have an http:// at the start, so it's supposed to be something hosted on my site, right?
Can you help? I'd really like to use this on my blog. It's brilliant. Thanks a lot.
s0upy, yes you will have to download "jquery.youtubepopup.min.js" and put it on your server. Using it directly from my server is not a good idea as it might break if my server goes down.
ReplyDeleteIs there any way to 'put it on my server' if I'm using a blogspot blog? Will it work if I just copy the javascript into my head section in the normal manner, or is there some other way to do it? All help/hints gratefully appreciated.
DeleteI've now got this to work (as per my comments above). Thanks a lot for the post - it's brilliant!
DeleteThis comment has been removed by the author.
ReplyDeleteI can not get this to work...
ReplyDeleteHere is a test link
http://www.aftermathinc.com/About/Media/TodayShowVideo/test.html
Anonymous,
ReplyDeleteThere is a problem with your jquery.youtubepopup.min.js file.
Replace it once with this version (http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js) and do not modify it.
I replace the youtubepopup.min.js file and a popup show up, but says file is not found.
DeletePlease help this. I am using latest version of Firefox and Chrome.
Thanks a lot for the code...please let me know how can i add thumbnail of the video
ReplyDeleteFor adding thumbnails, you just need to insert the video-id in one of these url's depending upon the thumbnail size you want:
ReplyDeletehttp://img.youtube.com/vi/video-id/0.jpg
http://img.youtube.com/vi/video-id/1.jpg
http://img.youtube.com/vi/video-id/2.jpg
http://img.youtube.com/vi/video-id/3.jpg
http://img.youtube.com/vi/video-id/default.jpg
http://img.youtube.com/vi/video-id/hqdefault.jpg
http://img.youtube.com/vi/video-id/maxresdefault.jpg
Great plugin! Thanks for sharing.
ReplyDeleteEasy to deploy and great examples
was exploring this plugin but its super slow in my machine. Looks like the video rendering has some issue.
ReplyDeleteSee the screenshot.
https://picasaweb.google.com/lh/photo/4rJQ9d9qzpHztoFaKx8xNLFy-kdj41dV26ABa0K9tOo?feat=directlink
any clues ?
gnuyoga, it seems to be problem on your side only. Try a different browser, network or even computer to isolate the issue.
ReplyDeleteGreat work Abhinay! I hope that this video (youtube, vimeo and other video hosts) popup behavior should be incorporated in HTML5 with the help of a special tag.
ReplyDeleteHi Abhinay.
ReplyDeleteI'm going crazy. As commented by someone up there, I work, I've tried everything, and always brings me to link to #. Do not know if the problem is with / jquery.youtubepopup.min.js. I tried on my own host, and does not work. I tried to link to your file directly to see if something was wrong, also with the other demos I've put in http://www.aftermathinc.com/About/Media/TodayShowVideo/test.html
My idea is to put it on Blogger, but since it does not work, I've tried here, and still does not work.
http://www.freenetica.comyr.com/1.htm
What am I doing wrong?
I will appreciate very much your help.
Victor, it seems like you hosting company is putting in some analytics code at the bottom of your page and it includes jQuery version 1.5.x. I suspect that this mixing of jQuery versions is causing the problem.
DeleteTry removing the jQuery include on top of your page and see if it works, or somehow get rid of the analytics code.
Thank Abhinay!
ReplyDeleteI've gotten it to work on another host!
http://mariarosacasanovas.com/2.htm
The problem now is on Blogger. It does not work
www.labodadesusanayvictor.blogspot.com.es /
I tried to put the code in a new Blogger blog and if it works ..
I've tried everything, and I want to put it always takes a /#
Thanks for you help!
I can see jQuery 1.6.1 also included on you page for the slideshow plugin. Can you just keep one version and see if that fixes the problem!
DeleteRight. Now works in Blogger. : D
DeleteVery good job.
Thanks!
Hi Abhinay,
ReplyDeleteThanks for this great bit of javascript. I've been working on building it into a wordpress plugin.
One problem i encountered is that wordpress puts jQuery into noConflict mode and that causes problems when calling the youtubepopup function. The solution is to surround the code of your library with (function($) { })(jQuery);
and then call it from within wordpress with jQuery(document).ready(function(){jQuery("#youtubeLink").YouTubePopup({ youtubeId: "' . $youtube_id . '", title: "My New Title" })});
not being an expert on js, i was just wondering if there is any way you could change to noConflict calling syntax in the library to make it a bit more portable?
anyway, i hope this helps if anyone else tries to get it going in wp.
Jason
demo doesn't even work m8!
ReplyDeleteHey! Great work!
ReplyDeleteI have it all working fine, and in under 15 minutes!
One problem though... hope you can help me out with this?
How do I get the popup to position itself centred in relation to the parent window.. for example, if popup is called from within an iframe? As of now, with long iframe, popup opens up half way down the page.
I'd be grateful if you would point me in the right direction ;).
Thanks for sharing anyway... it's appreciated.
Fantastically clear instructions. It worked first time for me. Thanks.
ReplyDeleteIs there a way to change the color of the titlebar? Do you have to get a new theme for jQUeryUI?
ReplyDeleteUse jQueryUI Themeroller
DeleteHi I think this is a great tool but I didn't see any documentation of how to use it with multiple links. How do you pass the YouTube id when you have multiple links? Thanks.
ReplyDeleteGreg.
Just put the YouTube Id's in "rel" attribute of each link.
DeleteThis comment has been removed by the author.
DeleteDude you rock! The sample code at the bottom was right in my face and I didn't try it. Thanks a lot.
DeleteTwo questions ....
ReplyDelete1) Any chance you would make a plugin for Vimeo videos? :)
2) On IE8, the popup takes up the width of the browser, even if I set a width attribute. Do you know offhand why this might be happening?
Thanks so much for all your help.
grate job,
ReplyDeleteand one issue for me,
stop the last frame,when finished the video.
and start from first frame when i click replay button.
but it played wrongly n last and first frame.
-raaja-
Hi Dude,
ReplyDeleteCan we place a check for Video State like UnStarted, Started, Paused etc. ?? Please revert as i need to put some tracking with current video state.
Thanks in advance.
Regards / Lokesh Yadav
code is really worthy, but one query. how to display you tube title along with the image in the html page?
ReplyDeleteThanks for the script. Can you allow a class/id to be passed to the dialog div that is created. This allows one to act on dialog events. For e.g, a carousel could be stopped upon opening the dialog and resumed upon closing the dialog.
ReplyDelete-kvh
I can't get my video to start in 720p even though the script is set by default to play in HD. PLease help!
ReplyDeleteYouTube has deprecated the HD parameter for iFrame player as it decides on it's own what quality to play. It kinda sucks!
DeleteHi,
ReplyDeleteReally loving this buddy. Keep up the good work!
-India Violet
Hi. Now I develop for Youtube popup service, but I can't find "like/dislike" button in my Youtube movie Popup.. I changed option in "jquery.youtubepopup.js" ,
ReplyDelete'youtubeId': '',
'title': '',
'useYouTubeTitle': false,
'idAttribute': 'rel',
'draggable': false,
'modal': true,
'width': 640,
'height': 480,
'hideTitleBar': true,
'clickOutsideClose': false,
'overlayOpacity': 0.5,
'autohide': 1,
'autoplay': 1,
'color': 'red',
'color1': 'FFFFFF',
'color2': 'FFFFFF',
'controls': 0,
'fullscreen': 1,
'loop': 0,
'hd': 1,
'showinfo': 1,
'theme': 'light',
'modestbranding' : 1
I am using IE9/Chrome/Firefox browsers, but i can't find like button :( please help my problems.. :) thanks you.
Hey Abhinay.
ReplyDeleteThanks a ton for this wonderful jquery youtube player plugin. This is exactly what I wanted...
I just started using it without any modifications. Life is made simple.
Recently I started facing one issue.
with modal = true, no issues, popup is placed exactly at the center of the screen. Wonderful.
with modal = false, popup is always placed exactly at the position where first popup was placed whatever scroll may be. (i.e if popup appeared in center and scroll down and click another link there which popsup another video...it does not appear there...we need to scroll up to see the video)
I wish popup always comes relative to the scrollup / scrolldown.
in other words, I wish to change the position (left, right) of the popup. Can I do that? I hope i made it clear.
I tried number of ways but failed. Abhinay, Can you please help in this case??
Thank you,
Ramesh.
hi,
ReplyDeletethrere is any chance to force caption from the plugin configuration?
i already try this for the plugins configuration:
'cc_load_policy':1,
but no success.
I installed the plug-in no problem!
ReplyDeleteWorks great, but I too have the problem in IE where the pop-up goes full width.
http://www.staginguk.flower-soft.co.uk/Video/Video.php
There's no spaces before the doc type so what else could it be?
Thanks
Alex
Managed to sort along with a few other IE issues by changing the doc type
DeleteHi Abhinay!
ReplyDeleteGreat job but unfortunately setting hd:1 did not work! Our video:
http://www.youtube.com/watch?v=hw54w02elHY&feature=context-cha&hd=1
How can I fix it? Thanks a lot
Fernando
any chance to force caption?
ReplyDeletethanks its works for me....
ReplyDeleteHey Abhinay, GREAT popup! But can't get it to display the full height div id="ad" in IE9. I tried EVERYTHING, even tables! http://webdesignbysteve.com/
ReplyDeleteAbhinay, I can't find the conflict on this page that stops it from returning correctly when the video is closed. -http://www.janisource.com/Articles.asp?ID=252
ReplyDeleteAny ideas.
Hmm. The problem seems to have resolved itself.
ReplyDeleteHi Abhinay. I'm a complete noob when it comes to all things coding related. I can't for the life of me get this to work.
ReplyDeleteWhat I have is a template with an image on it. What I want to be able to do is click the image and have it load the YouTube popup. But that's for later, for now I can't even get a simple blank page with 'test me' to load the popup. I have no idea what I'm doing wrong.
I even tried copying the source code from this page for my blank HTML file:
view-source:http://lab.abhinayrathore.com/jquery_youtube/demo.htm
But it's not working. I'm probably doing something completely wrong, but if you could in any way point me in the right direction, it'd be appreciated.
Nevermind! I've got it working! Thanks for the awesome script.
DeleteHi,
ReplyDeleteThe popup dialog box is coming at the bottom of the page and also the width of the dialog box is bigger. I am able to change the width the title bar (header) but not for the content area. Could you please assist in this. I am using Jquery 1.8.0 and UI version is jquery-ui-1.8.24.
Thanks.
Arul
Hi,
ReplyDeleteNow it is working fine with chrome but not in IE. In IE dialog box is coming but not the youtube video and I am getting "Navigation to the webpage was canceled" error message. Also I want to know how to give youtube URL with playlist or how to play two youtube videos.
Thanks.
Hi Abhinay,
ReplyDeleteHow to use this jquery.youtubepopup.min.js file with latest jquery 1.9 version?
Thanks
It is a great plugin. I need to run a task when the popup closes, there is an event that is triggered when closing the popup? Thank you!
ReplyDeleteAlvaro.
Is there a reason why this has just stopped working where I have deployed it?
ReplyDeleteWas working fine up until a few days ago....nothings changed?
Any ideas?
Did you check you jQuery library versions?
DeleteHello there Abhinay!
ReplyDeleteI am working on this site www.magecompany.com/wc.html , everything was fine until i placed a nivo slider app... then your video popup plugin did not show... I found what the issue is if i remove both
script type="text/javascript" src="jquery-1.7.1.min.js
script type="text/javascript" src="jquery.nivo.slider.js
then it all goes back to normal... Is there a way to tweak this I realise it's some kinda interplay bug between libraries, but i really need both plugins on the website!
thanx
Hey Abhinay!
ReplyDeleteAwesome plugin..I wanted to use this plugin to popup an introduction video on my landing page...I was able to achieve that but i wasn't able to figure out how to disable the plugin once the video is closed. Where exactly should i place the $("a.youtube").YouTubePopup('destroy'); to achieve the above
Hi Abinay,
ReplyDeleteThanks a lot for this wonderful jQuery plugin. I love it.
I do have a question. Is it possible to increase the height of the overlay screen, and I would like to add social network icons just below the video. How to achieve this?
Thanks.
Hello there,
ReplyDeleteWe modified the script to manage Dailymotion & Vimeo sources as well as YouTube ones. Code is available on GitHub : https://github.com/Treize37/jquery_video_popup_player
Cheers,
Fabrice
This is exactly what I was looking for. Thanks to the original author and to you for adding vimeo support! This will save me time!
DeleteI spent about 30 hours trying to build this myself from scratch with the intention to play it in the JQuery UI Dialog box. I did a google search before I started and your page didn't come up. I forget what I was searching on while trying to debug something tryin to get it to work and I came across your script. THANK YOU!!! My only recomendation would be to add a boolean flag (MaxWidth = window.width) I'm using your code on computer and mobile devices and I have to pass the variable and update it if the max width has changed (window has resized or user rotated thier mobile device).
ReplyDeleteGREAT JOB!
Hi Abhinay
ReplyDeleteGreat Job done.
We have developed separate class for all dialogues in our application. I have looked in source and didn't find possibility to pass dialog class.
Is it possible to pass our dialogClass to jquery dialog.
With the latest version you can specify the classes you want to add to the dialog.
Deletei set up all stuf getting this error
ReplyDeleteUncaught TypeError: Object [object Object] has no method 'YouTubePopup'
any solution ??
Plugin works great but for long pages the modal box starts half way down the page, and the user might not find it or know it exists. It should really appear instantly wherever on the page the viewer clicks the button. You might have to measure the vertical position of the page and make the box appear there when the view button is pushed. Also, in Chrome for some player sizes, the vertical and horizontal bars appear as part of the modal box as the player is larger than the box. This doesn't occur in Firefox. Thanks for the great work.
ReplyDeleteGreat work! The player is easy to implement, and works nicely. But do you know how I might slow down the background fade-in when the video loads? Is there a parameter I can change somewhere in JS? Right now the fade-in seems to happen too fast, a little abruptly. Any help greatly appreciated.
ReplyDeleteThanks for this tutorial
ReplyDeleteit really saved my life
still have one silly question
how to change the background of the close button
Thanks in advance
I want to allow users to recommend a YouTube video on my site. I want the recommendation to show up as a thumbnail and video title, that plays in an iFrame - (more or less like on FaceBook).
ReplyDeleteI don't think that my target audience will be sophisticated enough to find the ID in the share link.
If this is possible, can you explain how to do it?
Thanks!
I downloaded the following and used in my application for showing youtube video as popup and it works.
ReplyDeletehttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css
http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js
http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.js?98395789
But close(X)button is not showing in the dialog titlebar but a blank rectangle. It has 'Close' tooltip and by clicking I can close the video. How can I show the X icon on the Close button? Thanks in advance.....
I have multiple images(youtube video thumbnails - approx 9) appearing on my page and I am trying to use the above mentioned method to play the videos. The thepop-up is appearing but it is not able to run the videos. Need your help.
ReplyDeleteSumit
Hey Sumit,
DeleteDo you have the page somewhere I can take a look at? or else put it on pastebin and send the link to me.
Can I please have your email address, and I can share you the details on how you can access the page.
DeleteMine is chadhasumit13@hotmail.com
I've updated the plugin for some improvements. Now you don't need the YouTube Id to embed the video links. You can now use the regular YouTube URLs to add the video. Check it out!
ReplyDeleteHi,
ReplyDeleteNice plugin.
Though, I get a strange horizontal white bar behind the popup dialog window. How can I get rid of it ?
Claude
Change your jQuery UI version from 1 to 1.10.0 in the CSS and JS URLs. It looks like a jQuery UI bug.
DeleteHi Abhinay,
ReplyDeleteI have the same problem with the white bar, do you have a solution for it?
Thnx keep up the good work!
Change your jQuery UI version from 1 to 1.10.0 in the URL. It looks like a jQuery UI bug.
DeleteThnx for the solution it worked great!
DeleteHello Abhinay,
ReplyDeletei'd like to use your plugin but i cannot find any license.
Is there a license?
I'm not allowed to use the code, when it is not under any license.
Regards
Constantin
I have problems with z-order. Check out www.FreePropertyAlert.com and click the video in Chrome. You can see the white line on the right side. I also get similar attributes show up on Firefox from the menu on top. IE does not have any problems.
ReplyDeleteI tried changing the google UI lib to 1.10 and that didn't help either.
Any ideas?
Thanks,
Matt
Try changing you CSS to reduce the z-index value on the div below.
DeleteHey
ReplyDeleteJust wanted to know how you get the script to work for youtube playlists - cos I update my videos from youtube rather than from the website and so need to have a playlist linked to the popup that way it updates relatively.
Let me know if this is feasible - if so how?
Any help is much appreciated.
Ash
No it does not support playlists right now!
Deletehi, having a problem getting this to work. The pop up should be on the bird at the top right of the home page here:
ReplyDeletehttp://www.runningredlights.com
could you take a look?
Do not re-include the jQuery and jQueryUI library in your page when you are adding this plugin. The ones you've included on top of your page should work fine.
DeleteThis comment has been removed by the author.
Deletethanks, it's still not working though - the link still opens the youtube page instead of opening in a modal overlay.
DeleteI get this error:
DeleteTypeError: 'undefined' is not a function (evaluating '$(function () {
$("a.youtube").YouTubePopup({ autoplay: 0 });
})')
This comment has been removed by the author.
ReplyDeleteHi I'm testing the plugin but I get this error.
ReplyDeleteCan you guide me where is the error have.
uncaught referenceerror function is not defined
uncaught referenceerror options is not defined
DeleteI am having a problem with this popup wherein when I click the link the YouTube page opens and not the modal overlay. Even when I copy/pasted the demo code straight out of your page and created a page out of it the same error occured. I'm not sure what is going on. Can you offer any advice?
ReplyDeleteI'm using a hosted ecommerce store and have limited access to the site code, and no access to the php data variables. On the site I have a slider banner that is setup though a nice gui interface where I can enter the image, text and link url. What I want to do is link some slides to parts of the site, and some to a youtube video show in the popup.
ReplyDeleteThe link url for all slides is stored in %%GLOBAL_Slide_Link_Url%%, the call for the link is:
a href="%%GLOBAL_Slide_Link_Url%%"
I want to change that to
a class="youtube" href="%%GLOBAL_Slide_Link_Url%%"
this then works for the youtube video links but not for the site links as the youtube popup shows up..
What I would like to do is create a condition within the youtube function to detect if the url starts with http://youtu.be/
, as all my youbube links are formated as http://youtu.be/xxxxxxx. If so run the script, else return; out of function and go to regular link.
this is the format I was thinking about:
(function ($) {
if (href does not start with http://youtu.be)
{
return false;
}
else
{
run YouTube Popup Player Plugin....
}
})(jQuery);
-->
I just starting with javascript and web development, and was wondering if anyone could help me out to write that if condition to check.
also if I just return out of the function will the link to the other page work? or do i have to call something else within jQuery?
Thank you for your help.
Nice plugin!
ReplyDeleteThank you~~\(￣▽￣)/~~
Hey, love the plugin!
ReplyDeleteWanted to know how I would go about adding my own button in the title area, similar to the Close "X" button, so adding a button to the left of it to run a function onclick.
This could allow for doing some fancy things, like a subscribe button, change player size and so on.
(I can do the functions, just can't figure out where I would add code to make additional buttons to show up)
Thanks!
anyone else running into the issue of closing the youtube video while in IE 9+ and having the audio run for at least another 10 seconds?
ReplyDeleteI have the same problem as above here. Internet Explorer continues to play sound for about 10 seconds after the video window is closed.
ReplyDeleteRunning IE10 and there are no audio issues there, make sure that you have everything up to date (Flash Player, Java, any audio and video drivers and so on)
ReplyDeleteYou have done an excellent job, Keep it up .Thanaks for sharing
ReplyDeletewebsite for day traders http://www.intradaytips.com
FOR MORE BLOG LIKE THIS http://intradaytipscom.blogspot.in
Intraday tips for day traders. Our Nse tip work in 60 minute. for free trial visit: whttp://www.intradaytips.com
or send sms TRIAL TO 56767 or TRIAL TO 98 70 80 1717
Hi
ReplyDeleteWhere do I find the styling code for the box? I wish to style the header differently and the css file http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css doesn't include it.
I also wish to have the option to hide the title bar but am unable to do so even when setting it hidden by default. I also note that your source code on http://lab.abhinayrathore.com/jquery_youtube/ differs from the instruction: the instructions say class="youtube" but the source code shows class="hideTitle". When I use the latter, the code fails to work even though it works with your example!
is it possible to use it in CMS Made Simple (CSS)?
ReplyDeletei tried to implement your code but sadly i can't get it to work.
I would like it to play a video on pageload (when possible) just once during viewing the website
The pop-up video will start in hd 720p and will disable the annotation.
ReplyDeletevar YouTubeURL = "http://www.youtube.com/embed/" + youtubeId + "?vq=hd720&iv_load_policy=3&rel=0&showsearch=0&autohide=" + options.autohide;
Adding Effects:
ReplyDeleteOn line 18 after "modal: options.modal," you can add:
show: {effect: "scale",duration: 500},hide: {effect: "scale",duration: 400},
You can checkout the effects available on:
http://jqueryui.com/show/ and http://jqueryui.com/hide/
Is it possible to specify where I want the youtube modal to display? Right now it is floating off to the side of the page, but I want it to display inside a specific div container. Please advise.
ReplyDeleteGood job on the plugin, btw, Abhinay! Real nice.
Doesn't seem to work at all for me. Rather than a popup the "TestMe" link opens up in youTube site to play the vid. I am using the exact demo code you gave here:
ReplyDeletehttp://lab.abhinayrathore.com/jquery_youtube/
Opening in most recent Chrome and on Web.
what am I missing?
tx
dave
Hey.. Im using this code
ReplyDelete#< class="youtube" href="#" rel="ov2RY26vWsI" title="Ganesh Visarjan 2013">< src="images/magcircle.png" #
Is there anyway i can force it to show HD and not default 480p??
I tried your example on your webiste, copy/paste : does NOT work ...
ReplyDeleteGeat, totaly function. A vimeo extension will be nice. Thank you Abhinay Rathore
ReplyDeleteHi,
ReplyDeleteLove your scripts.
I spent a day getting your 2 year script into my website before finding the new one! I had a problem with the old one (always opened at the top of the page even if it was opened near the bottom). I am still using it as is but a fix for the position would be great.
But playing with your new script but have an issue. I have a color conflict with your light blue title bar with the rest of the website. Is there a way to change that light blue to something else? Is it a background I can replace?
Thanks for the great products though!
Ted
I have been working through getting you plugin working on a Lemonstand install for an ecommerce site and discovered a conflict with foundation.js. Now that the interface for the video is showing, There's still a problem with the video itself not appearing - giving the "An error occurred, please try again later" message. Have you run into this or know how I can fix this? I assume it's some conflict still because the video from you demo page works for my and I'm using the same video until I get it working.
ReplyDeleteThanks,
_B
Hi there!
ReplyDeleteThis script is awesome! I made a page with mixitup plugin and your popup plugin.
http://icsdev.irr.hu/html/video/
When the page loads and i don't do any sorting with mixitup, the plugin works very well! When i start using mixitup (I mean clicking one of the sorting buttons) then the youtubepopup plugin doesn't start.
It can be a bug or just I made some mistake?
Thanks,
Gabor
Hello I've tried the demo code at bottom of http://lab.abhinayrathore.com/jquery_youtube/, it doesn't work. While using the modified version taken from the website where I've known your plugin, it works O_o.
ReplyDeleteI do use the very latest version of Firefox.
Thank you for hinting
Robert
Though I'm wondering why the demo code in your page http://lab.abhinayrathore.com/jquery_youtube/ doesn't display anything never the less a drag-able window like in your nice demo link.
ReplyDeleteThank you
Robert
I must excuse myself, sorry for the previous two posts.
ReplyDeleteEither using CDNs testing the page in local was not working, I've uploaded it to one of my websites and it works.
Sorry again
Robert
I have one kind setting question: the modal view puts an overlay on top of the rest of the page. Looks like that the default is WHITE made transparent. Which is the setting to change it to black?
ReplyDeleteThank you
Robert
Ok, solution has been found also for the overlay. It is matter of find the correct identifiers of the jquery UI.
ReplyDeleteThe quick solution has been to add a CSS in page style in the head section
.ui-widget-overlay{
background:black;
}
thanks alot, its wonderful script
ReplyDeleteWhen I use page zoom in Chrome browser I get scrollbars. Any way to avoid that?
ReplyDeleteBr Johan
First of all... this is the easiest for using script I have ever seen... Great Job!
ReplyDeleteI was wondering if there is a way to use the same for pictures, so everything looks the same on a website when you open either video or pics ?
Thanks
Hi, great code, however: the views are not increased on the youtube page when people watch the video in the pop up on my website. Can this be done? I am curious that noone has raised this as a problem. Thank you in advance.
ReplyDeleteGreat popup thanks :) i just wonder if it is possible to make the popup once for a visitor? like a cookie code or something. as i am not a coder i need some help.
ReplyDeletewarm regards K
Hello! Your plugin is PERFECT!! Question? How can I make it not to be popup? I only needed the VIDEO_ID from YouTube URL? It is because I can use your jquery code in my smarty template. I know your jquery can work in Smarty template. Please let me know!!!
ReplyDeleteMany Thanks!!!
Rusty
I followed the instructions and the only thing I see is the popup with no video in it..
ReplyDeleteI made sure that the file jquery.youtubepopup.min.js is in the correct path within my site..
I even copy your demo link and link your jquery.youtubepopup.min.js to your site and it's not working for me
DeleteHi slywith1988z24, even the test page only works if it already hosted somewhere online, it doesn't work as local file
DeleteMe too, I have some problem. I see popup with no video. I even copy your test page, and not working. Please help!
ReplyDeleteHi Heymi, even the test page only works if it already hosted somewhere online, it doesn't work as local file
DeleteWork perfect, but not in blogger :(
ReplyDeleteHow to fix that, please?
Does not work for me. It tries to load the youtube link as a local file.
ReplyDeleteAnyone have any ideas?
GET file://www.google-analytics.com/analytics.js net::ERR_FILE_NOT_FOUND
jquery.min.js:3 GET file://www.youtube.com/embed/4eYSpIz2FjU?rel=0&showsearch=0&autohide=2&autoplay=0&controls=1&fs=1&loop=0&showinfo=0&color=red&theme=light net::ERR_FILE_NOT_FOUND
Never mine, I was loading it locally instead of through a web server.
DeleteHi, Great script, thank you.
ReplyDeleteHowever, I seem to have an issue whereby the video doesn't appear centre on a page if the page is quite long. It will generally appear way below the originating link, or even at the bottom of the page. Once the video is closed, the user is positioned back to where they were originally on the page. Is there a way to stop this, and have the video display in the current position rather than elsewhere on the page? Thank you.
Hi our site is https enabled . When I provide the youtube video id , its trying to call the http site instead of https so the browser is prompting the user to set the security as Mixed contents . Is there any way to avoid this problem with this beautiful youtube pop up plugin .
ReplyDeleteHi, great plugin. I'm looking for a way to start a video at a certain time, like 5 seconds, and have it autoplay. I have tried to had a start:5 parameter, but it doesn't work. Thank you.
ReplyDeleteThanks Abhinay for a great plugin. How do you incorporate orientationchange when the video has been loaded already? Any help would be greatly appreciated. Thanks!
ReplyDeleteThanks..Its work fine..Nice..
ReplyDeleteI used to run your demo code along with your .js files But I'm not getting the desired output.
ReplyDeleteInstead empty lightbox is appearing.
Thanks.
Great work on the plugin. A general issue, I guess in no small part due to the plugin now being a few years old, is that it isn't responsive. It doesn't work well on mobile... I hacked around it a bit but I'm not good in javascript at all so I can't really fix it.
ReplyDeleteHow do I apply this to a youtube api code ? I'm using jquery
ReplyDeletePython is a general-purpose interpreted, interactive, object-oriented and high-level programming language. Currently Python is the most popular Language in IT.
ReplyDeletepython training in bangalore
aws training in bangalore
artificial intelligence training in bangalore
data science training in bangalore
machine learning training in bangalore
hadoop training in bangalore
devops training in bangalore
python training in bangalore | python olnine training
ReplyDeleteaws training in bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training
python training in bangalore | python olnine training
ReplyDeleteaws training in bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training
python training in bangalore | python online training
ReplyDeleteaws training in bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training
By using our converter you can easily convert YouTube videos to mp3 (audio) or mp4 (video) files and download them for free - this service works for computers, tablets and mobile devices.
ReplyDelete