Saturday, May 7, 2011

jQuery YouTube Popup Player Plugin

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/

jQuery_YouTube_Popup_Player_Plugin_700

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:

  1. 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:

  1. 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:

  1. hideTitleBar: (default: false) Hide the Title Bar of the Dialog Widget. (Only works with Modal option enabled.)
  2. clickOutsideClose: (default: false) Closes the Popup Dialog when clicked outside on the Modal overlay. (Only works with Modal option enabled.)
  3. overlayOpacity: (default: 0.5) Sets the opacity value (from 0 to 1) for the Dialog Widget overlay.

196 comments:

  1. once again awesome script!!! I am struggling with getting the title of video to show up under the title of the player. any suggestions?

    ReplyDelete
  2. Pinball, can you please explain in detail what problem are you facing with displaying the title? (May be with a screenshot).

    ReplyDelete
  3. I 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?

    ReplyDelete
  4. Well, 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.

    What 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.

    ReplyDelete
  5. thanks for the insight, I kind of figured it might not be possible. Again thanks for the awesome script!!!!

    ReplyDelete
  6. Very cool and it works great!

    Except,
    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"

    ReplyDelete
  7. Anonymous,
    The 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.

    ReplyDelete
  8. To get full screen working, the script should be modified to use the embedded url structure:
    http://www.youtube.com/embed/

    Instead of:
    http://www.youtube.com/v/

    ReplyDelete
  9. Also, for mobile platforms;

    If 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.

    ReplyDelete
  10. Thanks for the tip Anonymous,
    I'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.
    }

    ReplyDelete
    Replies
    1. Hello ,
      thanks 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?

      Delete
  11. 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 "#".

    However, 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');

    ReplyDelete
  12. 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.
    Thanks,
    Alex

    ReplyDelete
  13. Alex, did you try the latest code of this plugin? Also, are you setting different sizes for multiple popups on a single page?

    ReplyDelete
  14. Hi,

    Just 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.

    ReplyDelete
  15. Alg, simply click the link using jQuery click event:
    $(function () {
        $("a.youtube").YouTubePopup().click();
    });

    ReplyDelete
  16. el link está caído http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.htm?920835593

    ReplyDelete
  17. is it possible to use youtube player as plugin in asp.net

    ReplyDelete
  18. Does the plugin work for the most recent firefox in Mac OS ?

    Appears everything black. Thanks

    ReplyDelete
  19. 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!

    ReplyDelete
  20. I'm getting scroll bars in the dialog no matter the size of the video nor the size of the screen I set. Any thoughts?

    Thanks in advance!

    ReplyDelete
  21. Whatever it was, it's they're gone now. Thanks for the great post!

    ReplyDelete
  22. Hi. I'd love to have more control over the title bar. I see Anonymous above said:

    >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.?

    ReplyDelete
  23. 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.
    You can customize your theme with the themeroller on this page: http://jqueryui.com/themeroller/

    ReplyDelete
  24. Hi abhinay,

    I am new to Jquery, i just wanted to know, will it work in .asp pages?

    Please let me know.

    Thank you

    ReplyDelete
  25. Anonymous, this plugin is jQuery/JavaScript based so it will work with any kind of back-end technology including ASP or ASPX.

    ReplyDelete
  26. Thank 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?

    ReplyDelete
  27. Anonymous, no there is no way for the javascript code to know that the video is finished playing.

    ReplyDelete
  28. I 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?

    ReplyDelete
  29. Annymous, 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:
    "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 :)

    ReplyDelete
  30. 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?

    ReplyDelete
  31. Hi, great code and easy to use !
    Stupid question though, how can you change the color of the pop-up bar (blue by default) ?

    Thanks !

    ReplyDelete
  32. Anonymous, for changing the color of the pop-up box, you can generate a new custom theme at http://jqueryui.com/themeroller/.

    ReplyDelete
  33. When I copy paste the demo code, I get the error:

    $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.

    ReplyDelete
  34. Anonymous,
    The 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?

    ReplyDelete
  35. My mistake. It would probably help if I had copied the youtubepopup.min.js file into the website. Thanks for the response!

    ReplyDelete
  36. Nice 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

    ReplyDelete
  37. Mine'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.

    ReplyDelete
  38. Anonymous, try this demo page in you IE's and see if it works or not http://lab.abhinayrathore.com/jquery_youtube/demo.htm
    Just 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.

    ReplyDelete
  39. Getting a Woopra error when I click any link after the YouTube video is shown"

    Microsoft JScript runtime error: Object doesn't support this property or method

    It is breaking on the woopra line: this.sleep(400);

    Any idea?

    ReplyDelete
  40. Dear Abhinay Rathore,
    This is very nice but what's the best way of positioning the popup on the page?
    Thanks

    Clive Betteridge

    ReplyDelete
  41. Greatttt work Abhinay,
    i'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

    ReplyDelete
  42. Mikey, you can trigger the popup player from any JavaScript function like this:
    $("a.youtube").YouTubePopup().click();

    ReplyDelete
  43. Hi Abhinay thanx for the reply and also your kind email.
    Unfortunately 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

    ReplyDelete
  44. HTML link unfortunately is not displayed above but works with ''Href'' and then instead of link the function DL2 is executed.

    Mikey

    ReplyDelete
  45. Quick question: how do I change the overlay color to black? Thanks!

    ReplyDelete
  46. Answered 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?

    ReplyDelete
  47. This 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.

    The 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.

    ReplyDelete
  48. 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.

    ReplyDelete
    Replies
    1. Is 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.

      Delete
    2. I've now got this to work (as per my comments above). Thanks a lot for the post - it's brilliant!

      Delete
  49. This comment has been removed by the author.

    ReplyDelete
  50. I can not get this to work...
    Here is a test link

    http://www.aftermathinc.com/About/Media/TodayShowVideo/test.html

    ReplyDelete
  51. Anonymous,
    There 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.

    ReplyDelete
    Replies
    1. I replace the youtubepopup.min.js file and a popup show up, but says file is not found.
      Please help this. I am using latest version of Firefox and Chrome.

      Delete
  52. Thanks a lot for the code...please let me know how can i add thumbnail of the video

    ReplyDelete
  53. For adding thumbnails, you just need to insert the video-id in one of these url's depending upon the thumbnail size you want:
    http://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

    ReplyDelete
  54. Great plugin! Thanks for sharing.
    Easy to deploy and great examples

    ReplyDelete
  55. was exploring this plugin but its super slow in my machine. Looks like the video rendering has some issue.
    See the screenshot.
    https://picasaweb.google.com/lh/photo/4rJQ9d9qzpHztoFaKx8xNLFy-kdj41dV26ABa0K9tOo?feat=directlink

    any clues ?

    ReplyDelete
  56. gnuyoga, it seems to be problem on your side only. Try a different browser, network or even computer to isolate the issue.

    ReplyDelete
  57. Great 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.

    ReplyDelete
  58. Hi Abhinay.
    I'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.

    ReplyDelete
    Replies
    1. 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.
      Try removing the jQuery include on top of your page and see if it works, or somehow get rid of the analytics code.

      Delete
  59. Thank Abhinay!
    I'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!

    ReplyDelete
    Replies
    1. 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!

      Delete
    2. Right. Now works in Blogger. : D
      Very good job.
      Thanks!

      Delete
  60. Hi Abhinay,

    Thanks 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

    ReplyDelete
  61. Hey! Great work!

    I 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.

    ReplyDelete
  62. Fantastically clear instructions. It worked first time for me. Thanks.

    ReplyDelete
  63. Is there a way to change the color of the titlebar? Do you have to get a new theme for jQUeryUI?

    ReplyDelete
  64. Hi 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.

    Greg.

    ReplyDelete
    Replies
    1. Just put the YouTube Id's in "rel" attribute of each link.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Dude you rock! The sample code at the bottom was right in my face and I didn't try it. Thanks a lot.

      Delete
  65. Two questions ....

    1) 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.

    ReplyDelete
  66. grate job,
    and 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-

    ReplyDelete
  67. Hi Dude,

    Can 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

    ReplyDelete
  68. code is really worthy, but one query. how to display you tube title along with the image in the html page?

    ReplyDelete
  69. Thanks 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.
    -kvh

    ReplyDelete
  70. I can't get my video to start in 720p even though the script is set by default to play in HD. PLease help!

    ReplyDelete
    Replies
    1. YouTube has deprecated the HD parameter for iFrame player as it decides on it's own what quality to play. It kinda sucks!

      Delete
  71. Hi,

    Really loving this buddy. Keep up the good work!

    -India Violet

    ReplyDelete
  72. 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" ,
    '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.

    ReplyDelete
  73. Hey Abhinay.

    Thanks 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.

    ReplyDelete
  74. hi,
    threre 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.

    ReplyDelete
  75. I installed the plug-in no problem!

    Works 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

    ReplyDelete
    Replies
    1. Managed to sort along with a few other IE issues by changing the doc type

      Delete
  76. Hi Abhinay!

    Great 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

    ReplyDelete
  77. thanks its works for me....

    ReplyDelete
  78. Hey 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/

    ReplyDelete
  79. Abhinay, 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

    Any ideas.

    ReplyDelete
  80. Hmm. The problem seems to have resolved itself.

    ReplyDelete
  81. Hi 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.

    What 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.

    ReplyDelete
    Replies
    1. Nevermind! I've got it working! Thanks for the awesome script.

      Delete
  82. Hi,

    The 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

    ReplyDelete
  83. Hi,

    Now 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.

    ReplyDelete
  84. Hi Abhinay,

    How to use this jquery.youtubepopup.min.js file with latest jquery 1.9 version?

    Thanks

    ReplyDelete
  85. 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!

    Alvaro.

    ReplyDelete
  86. Is there a reason why this has just stopped working where I have deployed it?

    Was working fine up until a few days ago....nothings changed?

    Any ideas?

    ReplyDelete
  87. Hello. Here's the site I'm working on. http://laurenevans.com/

    No matter what I do I get inner scrollbars. Any ideas for how to remove those?

    ReplyDelete
  88. Hello there Abhinay!

    I 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

    ReplyDelete
  89. Hey Abhinay!
    Awesome 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

    ReplyDelete
  90. Hi Abinay,
    Thanks 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.

    ReplyDelete
  91. Hello there,

    We 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

    ReplyDelete
    Replies
    1. 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!

      Delete
  92. I 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).

    GREAT JOB!

    ReplyDelete
  93. Hi Abhinay

    Great 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.

    ReplyDelete
    Replies
    1. With the latest version you can specify the classes you want to add to the dialog.

      Delete
  94. i set up all stuf getting this error

    Uncaught TypeError: Object [object Object] has no method 'YouTubePopup'

    any solution ??

    ReplyDelete
  95. 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.

    ReplyDelete
  96. Great 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.

    ReplyDelete
  97. Thanks for this tutorial
    it really saved my life
    still have one silly question
    how to change the background of the close button
    Thanks in advance

    ReplyDelete
  98. 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).
    I 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!

    ReplyDelete
  99. I downloaded the following and used in my application for showing youtube video as popup and it works.
    http://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.....

    ReplyDelete
  100. 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.

    Sumit

    ReplyDelete
    Replies
    1. Hey Sumit,
      Do you have the page somewhere I can take a look at? or else put it on pastebin and send the link to me.

      Delete
    2. Can I please have your email address, and I can share you the details on how you can access the page.
      Mine is chadhasumit13@hotmail.com

      Delete
  101. 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!

    ReplyDelete
  102. Hi,

    Nice plugin.

    Though, I get a strange horizontal white bar behind the popup dialog window. How can I get rid of it ?

    Claude

    ReplyDelete
    Replies
    1. Change your jQuery UI version from 1 to 1.10.0 in the CSS and JS URLs. It looks like a jQuery UI bug.

      Delete
  103. Hi Abhinay,

    I have the same problem with the white bar, do you have a solution for it?

    Thnx keep up the good work!

    ReplyDelete
    Replies
    1. Change your jQuery UI version from 1 to 1.10.0 in the URL. It looks like a jQuery UI bug.

      Delete
    2. Thnx for the solution it worked great!

      Delete
  104. Hello Abhinay,

    i'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

    ReplyDelete
  105. 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.

    I tried changing the google UI lib to 1.10 and that didn't help either.

    Any ideas?

    Thanks,
    Matt

    ReplyDelete
    Replies
    1. Try changing you CSS to reduce the z-index value on the div below.

      Delete
  106. Hey

    Just 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


    ReplyDelete
  107. hi, having a problem getting this to work. The pop up should be on the bird at the top right of the home page here:
    http://www.runningredlights.com
    could you take a look?

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. thanks, it's still not working though - the link still opens the youtube page instead of opening in a modal overlay.

      Delete
    4. I get this error:

      TypeError: 'undefined' is not a function (evaluating '$(function () {
      $("a.youtube").YouTubePopup({ autoplay: 0 });
      })')

      Delete
  108. This comment has been removed by the author.

    ReplyDelete
  109. Hi I'm testing the plugin but I get this error.
    Can you guide me where is the error have.

    uncaught referenceerror function is not defined

    ReplyDelete
    Replies
    1. uncaught referenceerror options is not defined

      Delete
  110. I 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?

    ReplyDelete
  111. I'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.
    The 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.

    ReplyDelete
  112. Nice plugin!
    Thank you~~\( ̄▽ ̄)/~~

    ReplyDelete
  113. Hey, love the plugin!
    Wanted 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!

    ReplyDelete
  114. 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?

    ReplyDelete
  115. I have the same problem as above here. Internet Explorer continues to play sound for about 10 seconds after the video window is closed.

    ReplyDelete
  116. Running 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)

    ReplyDelete
  117. You have done an excellent job, Keep it up .Thanaks for sharing

    website 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

    ReplyDelete
  118. Hi

    Where 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!

    ReplyDelete
  119. is it possible to use it in CMS Made Simple (CSS)?
    i 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

    ReplyDelete
  120. The pop-up video will start in hd 720p and will disable the annotation.

    var YouTubeURL = "http://www.youtube.com/embed/" + youtubeId + "?vq=hd720&iv_load_policy=3&rel=0&showsearch=0&autohide=" + options.autohide;

    ReplyDelete
  121. Adding Effects:

    On 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/

    ReplyDelete
  122. 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.

    Good job on the plugin, btw, Abhinay! Real nice.

    ReplyDelete
  123. 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:

    http://lab.abhinayrathore.com/jquery_youtube/

    Opening in most recent Chrome and on Web.

    what am I missing?

    tx

    dave

    ReplyDelete
  124. Hey.. Im using this code

    #< 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??

    ReplyDelete
  125. I tried your example on your webiste, copy/paste : does NOT work ...

    ReplyDelete
  126. Geat, totaly function. A vimeo extension will be nice. Thank you Abhinay Rathore

    ReplyDelete
  127. Hi,
    Love 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

    ReplyDelete
  128. 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.

    Thanks,
    _B

    ReplyDelete
  129. Hi there!

    This 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

    ReplyDelete
  130. 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.
    I do use the very latest version of Firefox.
    Thank you for hinting
    Robert

    ReplyDelete
  131. 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.
    Thank you
    Robert

    ReplyDelete
  132. I must excuse myself, sorry for the previous two posts.
    Either 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

    ReplyDelete
  133. 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?
    Thank you
    Robert

    ReplyDelete
  134. Ok, solution has been found also for the overlay. It is matter of find the correct identifiers of the jquery UI.
    The quick solution has been to add a CSS in page style in the head section
    .ui-widget-overlay{
    background:black;
    }

    ReplyDelete
  135. thanks alot, its wonderful script

    ReplyDelete
  136. When I use page zoom in Chrome browser I get scrollbars. Any way to avoid that?

    Br Johan

    ReplyDelete
  137. First of all... this is the easiest for using script I have ever seen... Great Job!
    I 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

    ReplyDelete
  138. 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.

    ReplyDelete
  139. Great 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.

    warm regards K

    ReplyDelete
  140. 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!!!
    Many Thanks!!!
    Rusty

    ReplyDelete
  141. I followed the instructions and the only thing I see is the popup with no video in it..

    I made sure that the file jquery.youtubepopup.min.js is in the correct path within my site..

    ReplyDelete
    Replies
    1. I even copy your demo link and link your jquery.youtubepopup.min.js to your site and it's not working for me

      Delete
    2. Hi slywith1988z24, even the test page only works if it already hosted somewhere online, it doesn't work as local file

      Delete
  142. Me too, I have some problem. I see popup with no video. I even copy your test page, and not working. Please help!

    ReplyDelete
    Replies
    1. Hi Heymi, even the test page only works if it already hosted somewhere online, it doesn't work as local file

      Delete
  143. not working anywhere tried on w3school and my blogger blog,

    ReplyDelete
  144. Work perfect, but not in blogger :(
    How to fix that, please?

    ReplyDelete
  145. Does not work for me. It tries to load the youtube link as a local file.

    Anyone 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

    ReplyDelete
    Replies
    1. Never mine, I was loading it locally instead of through a web server.

      Delete
  146. Hi, Great script, thank you.

    However, 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.

    ReplyDelete
  147. 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 .

    ReplyDelete
  148. Hi, 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.

    ReplyDelete
  149. Thanks Abhinay for a great plugin. How do you incorporate orientationchange when the video has been loaded already? Any help would be greatly appreciated. Thanks!

    ReplyDelete
  150. I used to run your demo code along with your .js files But I'm not getting the desired output.
    Instead empty lightbox is appearing.
    Thanks.

    ReplyDelete
  151. 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.

    ReplyDelete
  152. How do I apply this to a youtube api code ? I'm using jquery

    ReplyDelete
  153. 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

Thanks a lot for your valuable comments :)