Youtube with fancy zoom

July 18, 2010 | Posted by: Gopi R | Wordpress plugin | 106 Comments | Video tutorial

Youtube with fancy zoom (This is a jQuery based fancy zoom) wordpress plugin create the youtube video gallery in the wordpress website. This plugin retrieve one random video from the video list. In admin we have separate video management page to insert the videos. We can add many videos in the admin and it will show only one video in the front end. Short code available to add the video in the pages and posts.

What is jQuery based fancy zoom? Fancy zoom is a simple, modest script used to overlay video on the current page. click and see the demo you will get understand.

Plugin demo available on sidebar check the fancy zoom video on sidebar and short code demo available below check the fancy zoom effect. Refresh this page and see the another video on sidebar.

Features of this plugin

  • Simple to use.
  • Fancy zoom effect for you tube videos.
  • We can use this in a widget, page & post.
  • Random video on widget.
  • Easy styles override using css.

Installation instruction

Method 1

  • Download the plugin youtube-with-fancy-zoom.zip from download link.
  • Unpack the youtube-with-fancy-zoom.zip file
  • Extract the /youtube-with-fancy-zoom/ folder.
  • Drop the youtube with fancy zoom folder into your ‘wp-content/plugins’ folder.
  • In word press administration panels, click on plug-in from the menu.
  • You should see your new youtube with fancy zoom plug-in listed.
  • To turn the word presses plug-in on, click activate.

Method 2

  • Go to ‘add new’ menu under ‘plugins’ tab in your word-press admin.
  • Search youtube with fancy zoom plugin using search option.
  • Find the plugin and click ‘Install Now’ link.
  • Finally click activate plug-in link to activate the plug-in.

Method 3

  • Download the plugin youtube-with-fancy-zoom.zip from download link.
  • Go to ‘add new’ menu under ‘plugins’ tab in your word-press admin.
  • Select upload link (top link menu).
  • Upload the available youtube-with-fancy-zoom.zip file and click install now.
  • Finally click activate plug-in link to activate the plug-in.


Plugin configuration

Method 1

Drag and Drop the Widget : Go to widget page under Appearance tab, Drag and drop Youtube with fancy zoom widget into your side bar. its very easy.

Method 2

Add directly in the theme : Use this code to add the gallery to your Theme files.

Method 3

Add the gallery in the Posts or Pages : Copy and paste the given short code into pages or posts. Click here to see the short code.

Admin setting page

Title : This is title text for your YouTube video.

Youtube watch link : This is the YouTube video link.

Ex : http://www.youtube.com/watch?v=Vc6V4b4VgOk

YouTube code : This is to create youtube thumbnail.

If (http://www.youtube.com/watch?v=Vc6V4b4VgOk) this is your youtube video

then “Vc6V4b4VgOk” this is your YouTube code.

Simply the query string “v” is your YouTube code.

Thumbnail Image link (Your Thumbnail) : Put your own thumbnail image link (optional)

To display your own thumbnail image put your image in this field and set Display Image = Your Thumbnail.

Display Image : You can set what image to display at thumbnail using this field.

Your Thumbnail = This will display the image from your given link.

YouTube Thumbnail = This will display the image from youtube.

Display Status : This is for record display status.

Put this YES always then only the record display at front end.

Sidebar Display : Put this YES always then only the record will display on widget,

The record contain Sidebar Display = YES will display at widget.

Frequently Asked Questions

Q1. Where to add video?
Administration → Settings → youTube fancy zoom.

Q2. How to arrange the width of the widget thumbnail image?
For YouTube thumbnail we have two option, small and big.

Q3. What is YouTube code in the form?
If (http://www.youtube.com/watch?v=Vc6V4b4VgOk) this is your youtube video
then “Vc6V4b4VgOk” is your youtube code.

Q4. What is Title?
This is video title

Q5. What is YouTube watch link?
Watch link is the complete youtube video link
Ex: http://www.youtube.com/watch?v=Vc6V4b4VgOk

Q6. What is Thumbnail Image link?
If you want to user your own thumbnail image use this text filed and enter your image link

Q7. What is Display Image?
This option is to choose the thumbnail image

Q8. What is Display Status?
This option is to stop display video on front end. Only video have display image option YES will display on front end.

Q9. What is Sidebar Display?
This option is to stop display video on front end sidebar. Only video have display image option YES will display on front end sidebar.

Comments (106)

  1. Diane says:

    I love the plugin, but it won’t zoom. I am using WordPress version 2.8.6. Any suggestions?

  2. Diane says:

    I figured it out . . .thanks!

  3. B Jones says:

    Diane how did you fix it?

  4. Bruce says:

    can this display multiple video thumbnails in the sidebar, instead of one random one?

  5. Bruce says:

    One more question – I places four video links in a page, using the [YoutubeFancyZoom=xxxxxxxxxx] format. Three of them display properly, but one displays two thumbnails, one on top of the other.(It is the third of the four.) Any idea what is going on? If I look at the page source code, it shows two for that one, but not for others. I am using wp 3.01 with Thesis 1.7.

  6. Bruce says:

    I tried using a custom thumbnail, and it did display, but so did the youtube one, above it. Very strange beause the other three work fine…

  7. Omer Rosenbaum says:

    Nice plugin, but there is a problem with the encoding. If you want to insert a description in a language other than English (latin letters) you get question mark signs.
    I fixed it by encoding it to utf-8.

  8. James says:

    Hi there,
    great plugin; I’ve found one problem, though. I don’t seem to be able to get autoplay working :-(

    On my test page: http://demo.blindfoldedmarathon.com/about/
    there’s a video embedded, and I’ve set the Youtube watch link to be: http://www.youtube.com/watch?v=r9ee6I9m7MQ&autoplay=1

    The browser is parsing this correctly but I still have to click the video for it to start. Any ideas please?

  9. Alex says:

    Hi, it is very cool plugin, thx. But I have the next problem, I have 2 videos to display. I want to show in my widget only one video, but when Yo watch video You can watch 2 videos. So, I set for 1st one – “Dis Status” and “Sidebar” – “YES”. And for 2d video: “Dis Status” – yes, and “Sidebar” – no. But on my web sometimes I see 1st video and 2d. How to fix it? Is it bug? Thank U !!!

  10. Alex says:

    sorry, there was some mistake. I have 2 videos to display. I want to show in my widget only one video, and when Yo watch video You can watch 2 videos. So, I set for 1st one – “Dis Status” and “Sidebar” – “YES”. And for 2d video: “Dis Status” – yes, and “Sidebar” – no. But on my web in widget sometimes I see 1st video and 2d. How to fix it? Is it a bug? Thanks

  11. jean gilot says:

    thanks you for a supporting God blessing

  12. Roeg says:

    Is there a way to make the box bigger so I can fit a description, share options and a 300×250 ad spot? How would I do it?
    Thank you

  13. Matt Jones says:

    I’m trying to implement it in the Video Page, but it doesn’t zoome :-(

  14. Dave White says:

    Hello, Just installed the plugin and it seems good, easy to use. My only problem is that Internet Explorer 6 generates an error, any fix for this? Also autoplay would be nice since they’ve already clicked something showing that they want to play the movie.

  15. Marty Dasilva says:

    Hi there, I like the widget and it works great on most pages however when I use it in the sidebar of my woo theme “coffetime” the page information disappears. Any hep would be appreciated.

  16. Lori Corbett says:

    I love this plugin…thank you for taking the time to create it. I have a question, though. I am building a site with pages that have different configurations. It seems that I can only drag the widget once to one page only. I need to add the widget to all of my pages. Can this be done, and how?
    Thanks again!
    Lori

    • Admin says:

      At present we can can add this widget only one place. the sidebar.php page is common for all the page right? then u can add this widget into this sidebar.php page, then it ll render all the pages.

      please reply if u have any problem.

    • Lori Corbett says:

      Nevermind, I figured it out. I installed the Advanced Text Widget, then inserted the .php code into the Advanced text Widget. Works like a charm!
      Lori

  17. Cong hoang says:

    i love all your plugins. Youtube fancy zoom plugin is cool man, however if it works with all the website not just youtube. i mean i can embed video from Veoh or Dailymotion, its will be much better…thanks man

  18. Sampie says:

    Hey there. First of all thanks for this great plugin. It makes our websites loog good :) I have a question: At the moment you can only have 1 playlist show up in the side bar. Is it possible to have 2?? I now have the youtube thumbnail in the sidebare, when you click on it the fancy zoom thingy shows up and there is my play list. I want another thumbnail in the side bar where I can have a different playlist. One would be Youtube favourites end the other will be My video’s

    Is this possible??

  19. joshua de quilettes says:

    Can someone help me, I haven’t figured out how to get the zoom to pop out from the sidebar…

    thanks

  20. Dave White says:

    I have one movie selected to display in the sidebar, but it rotates through the other movies that are marked no. Any fix?

  21. Matt says:

    First, I would like to say that this is an excellent plugin and value all the hard work that you put in to this. Unfortunately, I noticed that there are some javascript errors which are causing some issues. Also, the code is not w3c compliant. A little more work and I think that you will have yourself a SERIOUSLY good plugin. I’ll stay tuned for the new updates. I wish I could contribute more but at this point I cannot.

  22. Bobby Rims says:

    I’m trying to put YT vids in posts and a page haven’t figured it out – put the codes on the pages and post and only that shows. What am I not doing right? Thanks B

  23. Bobby Rims says:

    I figured it out for post and pages – paste the code – then – add the vid link
    Your stuff is great -I’ll make a donation when I get paid
    Thanks

  24. Will Auld says:

    I am using the plugin but have a problem with my recent videos. Worked OK with MP4 but current set of videos is wmv and had a problem. What happens is: click on thumbnail the player comes up but flashes on and off several screens (maybe 15-20 seconds) before it settles on the screen with play button.

    Any ideas on how to fix this?

    Thanks

  25. jean gilot says:

    i love ploging

  26. jean gilot says:

    i love plugin

  27. jean gilot says:

    i like plugin

  28. jean gilot says:

    i love plogin

  29. Camu says:

    Hi, I love this plugin but I have a problem with other plugin (Cimy Header Image Rotator and Yet Another Featured Posts Plugin) when I active it. How can i solve?
    Thanks

  30. illuminated says:

    I love your plugin. My only suggestion would be to give an option for a white background.

  31. widow says:

    Hi there, really love this plugin but could you tell me if there is a way of having the thumbnails horizontal rather than vertical which they are at the moment. Thank you

  32. Vanderhellen says:

    Thx for the plugin.

    How can I realize it to display the largest size of the video I’ve uploaded to Youtube? E.g. 480p = 864×480 px

    A click on the video shouldn’t switch to my Youtube-Account. How can I fix it?

    Cheers.

  33. Great Video Gallery for Wordpress « web.developers says:

    [...] This design of gallery is just minimalistic, you can see a live demo in this page [...]

  34. Mark says:

    Can’t seem to get title centred over box?

  35. James Williams says:

    I am using this plugin through out a clients site but I have a custom theme and I need to use an A HREF to link an image to the script in a theme. Is there A HREF code I can use?

  36. Mark says:

    Doesn’t seem to work in Internet Explorer, just get white box with an x??

    http://www.notapennydown.com/blog

  37. J. Medley says:

    Love this plugin! It is possible to implement fullscreen mode for playpack?

  38. Asan says:

    Hi Gopi,

    What is the code to add video in multiple places….

    Thanks a lot…

  39. P. Alford says:

    This plugin does not work properly and there appears to be no support, as I have found numerous users asking the same question: when using in sidebar as widget, clicking thumbnail image only opens youtube page – no fancy zoom! What is the deal? If I put a shortcode on a post, and use the widget, it works – but I don’t have a video to use on every post! Anybody figure out how to make this plugin work?

    • Cryber says:

      I have almost the same problem.
      In my case it opens the youtube page and fancy zoom. Using Mozilla Firefox 3.6.16 and Wordpres 3.1.1
      Sorry my English, i´m spanish.

  40. shawn says:

    This plugin compresses the size of the post page when there is a thumbnail on that post bage…skewing the display of the links and so forth…idea where to look for a solution?

  41. shawn says:

    The above is happening when I use the [YoutubeFancyZoom=xxxxxxxxxxxx]
    code in a post

  42. Gene says:

    Really digging this cool plugin. Only one question – how would you go about disabling related videos from appearing at the end of a video? I tried to attach the commonly used “rel=0″ at the end of the URL, but it did not make a difference. How knows if my client’s competitor video or even an embarrassing video will appear after the main video concludes on the viewer.

    • Prosenjeet says:

      I am also wondering how to remove the related links.’rel=0′ doesnt seem to work. I have posted this in the WordPress official extension page too. Hope the author responds soon.

  43. Stephane says:

    Hello,

    I want to use your plugin but not in a post , not with your short code [short code ].

    How can i use your code in a template page

    I must do this to put 3 videos horizontal by 1 line

    Like this : Video Video Video

    Can someone help me ?

    thanks a lot

  44. chris says:

    hi, nice plugin but one question – on our site we have 7 youtube videos one one wordpress page (see http://stuartryanmusic.com/main/media/). when you click one of these it flashes 6 times before it is ‘ready to go’. not sure what is causing this but i think it’s because all 7 videos are being loaded up when you click one of them (to allow you to step through them all with the next and back buttons). is there any way of stopping this flashing on load? each video is embedded like this
    [ YoutubeFancyZoom=97uumNvSMzc ]
    thanks
    chris

  45. Mario says:

    I have installed the plugin and i’m using it as a widget. However, when i click on the image to view the video, the widget directs me to youtube instead of functioning the way it should. Kindly help

  46. stephan says:

    still not sure how to actually show more than 1 video in the sidebar… I have it set to display 5 videos, even when I’ve inserted more than 1 video, only 1 video displays in my sidebar

  47. Guen says:

    Don’t work zoom. :(
    Using WP 3.1.

  48. Lukas says:

    Doesn’t work with WP 3.1 It zooms, but only black screen

  49. Aaron says:

    I’ve tried to upload a YouTube video. I’ve tried it numerous times. For giggles I even tried a couple of others, just to see if the problem was with the particular video. No dice.

    Every time I put in the info, I get a red message at the top of the screen saying “No data Available in Database! Creat New.” That’s what I thought I was doing!

    I put in the Watch Link & Code. I chose to use the YouTube thumbnail. I put “Yes” to both “Display Status” & “Sidebar Display”. I hit “Insert” and it goes back to the upload page with the above error message.

    Maybe the problem is on the “Widget Settings” page. Since I can’t find any information on any of your help pages on what to put in the fields for “Thumbnail Width” & “Thumbnail Height”, I’ve left them blank.

    Whatever it is, this is not working for me. I’ve used numerous YouTube widgets over the past 3 years, and all of them worked.

    This one? Not so much…

  50. Marc says:

    Mine works fine but it has a big white border around the thumbnail which I don’t like. How can I get rid of that?
    Marc

  51. Peter says:

    I like this plugin, but I need 4 video in sidebar.
    Is it possible to solve this? Right now it show only 1.

  52. Abe says:

    May I suggest you add another ad placement below the demo image. :)

  53. Hoang Ngo says:

    The plugin works great with IE, Firefox but it doesn’t zoom on Chrome and go straight to Youtube website instead. Please help check out my site @ http://banbecuatoi.com/blog

    Thanks,
    Hoang Ngo

  54. Hoang Ngo says:

    I’d like to update that the plugin doesn’t work on the Chrome sidebar but it’s OK with posts/pages. Do you have any ideas?

  55. Nghia Nguyen says:

    The plugin does not work in IE9. The demo fails to display the video screen.

  56. Habib says:

    waiting on my ad, was hoping to have it in the may edition. I did pay for it, but no reply; plese contact me on 773 791 7771 or email me aalyhabib@yahoo.com

  57. Gopi R says:

    YouTube with fancy zoom plugin Short Code

    [YoutubeFancyZoom=Bq2J76ozSSE]

    [YoutubeFancyZoom=3JQ6urEFLY8]

    Thanks & regards
    Gopi

  58. Gopi R says:

    Now version 6.0 available. Check the live demo on this page and download the latest version from download link.

    Thanks

  59. iya budiman says:

    heyy,,,
    ive installed this plugin and i love it

    i have some trouble

    i want to show 5-10 videos in my sidebar
    but there is just 1 thumbnail..

    ive add 3 working videos
    but the thumbnail in my sidebar just show 1

    please help me ^^

  60. ctwovaat says:

    i just downloaded the plugin and it look great but i wasnt able to find out how to have mutiple thumbnails on a post/page .. Is that a manual job ( you have a click button .. is it intended as a help for the img src for manual ) ?

  61. 5 плагинов WordPress для вставки и кастомизации просмотра видео с YouTube (Iframe) | Green Ray says:

    [...] shortcode [YoutubeFanceZoom=id], где id — это id видеоролика на YouTube. Посмотреть демо этого плагина. Скачать плагин для WordPress YouTube Fancy [...]

  62. Dede » Archive » test from You Tube says:

    [...] 3 Add the gallery in the Posts or Pages : Copy and paste the given short code into pages or posts. Click here to see the short [...]

  63. Ziltch says:

    this plugin works great but i have a problem. when i activate it, my banner did not work and when i deactivate it my banner works fine. any help?

  64. eric says:

    This is one of a GREAT plugin – excellent work :D

    I uploaded Version 6, activated it, followed your crystal clear instructions and works like a charm – sooooo cooooool

    Runs on my Mac in Firefox, Safari, Crome, Camino and Opera (all the latest versions) without any problems (sorry I am not after the Windows world and have no idea if IE is doing well with it).

    I am impressed with that plugin – thanks a lot for creating and sharing that

  65. eric says:

    update: this killer plugin works also in Windows IE8, IE9 Firefox and Chrome :)

    That’s the best plugin I ever installed on my WP blog

  66. JJ says:

    THIS PLUGIN BREAKS OTHER JQUERY PLUGINS

    Stop loading the jQuery library from your own source and use enqueue_scripts as per the standards

    The plugin is currently causing other jquery based plugins to break

    would appreciate you fixing this asap

  67. mikul@sh says:

    NOT WORK!!!
    with this code^

    $(document).ready(function() {
    $(“#tabs”).tabs();
    });

    Слайдшоу
    Фото
    Видео

    [album id=1 template=compact]

    [nggallery id=7]

    [YoutubeFancyZoom=YGwDHdbHR74]

  68. Fade in fade out post title wordpress plugin says:

    [...] Youtube with fancy zoom [...]

  69. shemi says:

    thx very nice pugins

  70. Xavi says:

    Hi, I would like to know how to set Editor role to insert youtube videos (without managing the rest of the plugin options).

    Also I would like to know if instead of a random video, the widget, could display the last video inserted.

    Thanks in advance.

  71. Jack says:

    Hi,
    I try to get a YouTube video into a page, but whatever I do, I can’t get it working.
    I know I am a nitwit on these things, so please can you tell me step by step what to do.

    The widget works fine, but into a page ???!??!?
    This is de video code: http://www.youtube.com/watch?v=mNpX3M5_EVc and I want put it on my video page.

    Hope to hear from you soon.

  72. John says:

    I originally place the wrong Youtube Code when trying to insert a Youtube video. In the list of videos I see the title, but in the Code column there is no code. There is however a Youtube video image within the Code Column. there is no option presented to delete the inserted video. The video does not work correctly on the webpage.

    Would anyone know how I can delete the video.

    Thank you in advance, John

  73. John says:

    Nice job Andy,

    Where in the database did you find the entry?

  74. peter says:

    hey , im wondering if there can be a way to also show the social sharing icons along side….somehow or other?? that would really take things to the next level!! :)

  75. gps javítás says:

    I truly prize your work, Great post.

  76. watch movie for free says:

    Great goods from you, man. I have consider your stuff previous to and you’re just too excellent. I really like what you’ve bought here, certainly like what you’re stating and the best way in which you assert it. You make it entertaining and you still take care of to keep it sensible. I can’t wait to read far more from you. That is really a terrific web site.

  77. chris dawson says:

    reposting – didn’t get a response previously
    —–
    hi, nice plugin but one question – on our site we have 7 youtube videos one one wordpress page (see http://stuartryanmusic.com/main/media/). when you click one of these it flashes 6 times (various mac browsers) before it is ‘ready to go’. not sure what is causing this but i think it’s because all 7 videos are being loaded up when you click one of them (to allow you to step through them all with the next and back buttons). is there any way of stopping this flashing on load? each video is embedded like this
    [ YoutubeFancyZoom=97uumNvSMzc ]

    is there any way of fixing this? i’ve upgraded to v6 by the way.
    many thanks
    chris

  78. get youtube views fast says:

    Valuable information. Lucky me I found your web site unintentionally, and I’m shocked why this twist of fate did not happened in advance! I bookmarked it.

  79. wendy says:

    is there any way to put the title underneath the youtube generated thumbnail? i see the title in a tool tip, but i would rather see the title under the thumb. thanks
    Wendy

  80. Massimo says:

    widget work for me , but it inhibit the function of the plugin “header image slider” .

  81. George says:

    Hello,
    It is nice you publish for free any of your work and thank you for this.
    My problem is that i use Greek Language on titles and it show like ????????, it is possible to use it on UTF-8 code?

    Thank you in advance

  82. youtube accounts says:

    Simply want to say your article is as astonishing. The clarity in your submit is just excellent and i can think you are an expert in this subject. Well with your permission let me to seize your RSS feed to keep up to date with imminent post. Thank you 1,000,000 and please carry on the rewarding work.

  83. Manu says:

    I’av got the same problem what chris dawson is having and I need to fix it , any help would be appreciated and do_shortcode isn’t working , I was trying to fetch all videos from db to show them dynamically without using that same shortcode for all videos ??

    Thanks,
    Manu

  84. olivier says:

    Hello,

    I add your plugging, add videos in the gallery, add the code in the template.

    I see the video. When i click on it, there is not zoom effect, no light box, this is directly link to Youtube.

    Do you have a solution get the lightbox (zoom effect) ?

    Thanks

  85. Michael P says:

    Has the jQuery issue been addressed yet? This still breaks other jQeury objects on my page. Other than that works great.

    Thank you.

  86. vestal watches says:

    Cool weblog! How can I reveal it within the social networks?

  87. Web Tester says:

    I added this plugin and uploaded 5 YouTube videos , but problem is when i click any video all video loaded at same time.

    Demo http://www.schandedutech.com/try-out-demo/

    Anyone can help me.

    Thanks

  88. Wordpress plugin youtube with fancy zoom says:

    [...] plugin youtube with fancy zoom WordPress plugin youtube with fancy zoom. Blog this! Recommend on Facebook Share on Linkedin Share via MySpace Tweet about it Subscribe to [...]

  89. Stan Ellis says:

    I loved this plugin for two weeks, then it quit playing on a video player directly on my home page.
    When I click the thumbnail now it goes to the youTube website to play my video. What Happened, better yet how do I FIX IT?

  90. Mangalore SEO says:

    Nice plugins thanks for share….

Leave a Reply