Title: [Plugin: NextGEN Gallery Optimizer] youtube
Last modified: August 20, 2016

---

# [Plugin: NextGEN Gallery Optimizer] youtube

 *  Resolved [stefsegers](https://wordpress.org/support/users/stefsegers/)
 * (@stefsegers)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/)
 * Hi guys,
 * I am trying to place a youtube video on my page with a fancybox link.
    When I
   add the class=”myfancybox” like the gallery items I get only a beach ball but
   no pup up with my youtube video.
 * I know that it’s possible but can’t seem to find out how.
 * Also I emaild mark about it since I bought a licence of the plugin but there’s
   no reply at all 🙁
 * I do hope anybody can help me out here?
 * [http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/](http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Mark Jeldi](https://wordpress.org/support/users/mark-jeldi/)
 * (@mark-jeldi)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106137)
 * Hi Stefan,
 * Thanks for downloading NextGEN Gallery Optimizer Premium!
 * Apologies for the delay, I’ve been away with limited Internet access.
 * Although Fancybox is technically able to display YouTube videos, both Optimizer
   and NextGEN Gallery itself are not designed for this purpose out-of-the-box. 
   However, I’ve been testing your source code (re: site link from your email), 
   and I’ve managed to come up with a solution for you.
 * Firstly, you’re going to need to disable the optional Rocket Loader service provided
   by CloudFlare which is currently active on your site (it should be under Performance
   Settings in your CloudFlare admin). It’s rewriting your scripts and causing jQuery
   to break.
 * Secondly, you’ll need to add the `class="myfancybox"` to each video link anchor
   tag as you mentioned you’d tried above eg…`<a class="myfancybox" href=`
 * Thirdly, I’ve pieced together a custom Fancybox invocation script for Optimizer
   that will look for your YouTube links and load the appropriate video inside the
   lightbox. To install this, you’ll need to open _wp-content/plugins/nextgen-gallery-
   optimizer-premium/nextgen-optimizer-premium-scripts-and-styles.php_ and replace
   the “fancybox inline js” section (at the top) with the following…
 *     ```
       /**********************************************************************
       * fancybox inline js
       **********************************************************************/
   
       function nggop_fancybox_inline_js() { ?>
       <!-- [nextgen gallery optimizer premium v<?php echo NGGOP_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
       <script type="text/javascript">jQuery.noConflict();jQuery(document).ready(function(){jQuery("a.myfancybox").click(function(){jQuery.fancybox({'hideOnContentClick': false, 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'width': 640, 'height': 390, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type': 'swf', 'swf': {'wmode': 'transparent', 'allowfullscreen': 'true'} }); return false; }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
       <?php
       }
       ```
   
 * Hope this helps!
 * Cheers,
    Mark.
 * PS. I’m not currently seeing any NextGEN scripts on your homepage (re: your email),
   so it would seem Optimizer is taking care of these correctly. It’s possible you
   may have been viewing a cached version of the page served by CloudFlare, which
   has since been updated.
 *  Thread Starter [stefsegers](https://wordpress.org/support/users/stefsegers/)
 * (@stefsegers)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106152)
 * Hi Mark,
 * This looks really great and that you for that code. It works great on my video
   page.
    Only one problem found on these pages [http://www.trouwshoot.nl/fotoalbum/exclusieve-digitaal-fotoalbum/](http://www.trouwshoot.nl/fotoalbum/exclusieve-digitaal-fotoalbum/)
   [http://www.trouwshoot.nl/fotoalbum/traditioneel-fotoalbum/](http://www.trouwshoot.nl/fotoalbum/traditioneel-fotoalbum/)
   [http://www.trouwshoot.nl/fotoalbum/basic-digitaal-fotoalbum/](http://www.trouwshoot.nl/fotoalbum/basic-digitaal-fotoalbum/)
 * For some reason it doesn’t work over here.
    Maybe the fancybox script isn’t loaded
   on that page at all?
 *  Plugin Author [Mark Jeldi](https://wordpress.org/support/users/mark-jeldi/)
 * (@mark-jeldi)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106157)
 * Hi Stefan,
 * I’ve been looking through the source code of your three other pages, and you 
   seem to be hard-coding images stored in the WordPress uploads directory (wp-content/
   uploads) in your posts. Optimizer is specifically designed to work with NextGEN
   Gallery, and will only load Fancybox’s scripts and styles if it finds a NextGEN
   shortcode in a post/page…
 * That said, if you’d rather keep your current arrangement, it is possible to customize
   Optimizer to conditionally load Fancybox where you’d like. Also, as you’re using
   both regular images and video on each page, we’ll also need to combine both the
   original invocation code, and my mod above in each page. You can then differentiate
   between the two by changing your links to use `<a class="myfancyboxvideo" href
   =` for your videos, and keep `<a class="myfancybox" href=` for the images. You’ll
   also need to link up your images to the larger version for them to display in
   the lightbox. Here we go…
 * Once again, simply replace the “fancybox inline js” section at the top of wp-
   content/plugins/nextgen-gallery-optimizer-premium/nextgen-optimizer-premium-scripts-
   and-styles.php with the following. This time we’ll add two functions, one to 
   conditionally load the necessary scripts on all WordPress “Pages” as your site
   appears to require, and the second to open both images and videos inside the 
   Fancybox lightbox.
 *     ```
       /********************************************************************************
       * optimizer premium custom function...load fancybox on all wordpress pages
       ********************************************************************************/
   
       function nggop_load_fancybox_on_all_pages() {
   
        	if (!is_admin()) {
        		if (is_page()) {
   
       		global $post;
       		global $nggop_options;
   
       		if (have_posts()) {
       			while (have_posts()) {
       				the_post();
   
       					if (isset($nggop_options['fancybox']) && ($nggop_options['fancybox'] == true)) {
   
       						// see scripts-and-styles.php for functions
       						add_action('wp_enqueue_scripts', 'nggop_load_jquery', 1000);
       						add_action('wp_enqueue_scripts', 'nggop_load_fancybox_scripts', 1000);
       						add_action('wp_print_styles', 'nggop_load_fancybox_styles', 1000);
       						add_action('wp_head','nggop_fancybox_inline_js', 1000);
   
       					}
   
       					add_action('wp_print_styles', 'nggop_load_nextgen_styles', 1000); // see scripts-and-styles.php for function
   
       				}
       			}
       		}
       	}
       }
       add_action( 'wp', 'nggop_load_fancybox_on_all_pages' );
   
       /********************************************************************************
       * optimizer premium fancybox inline js...customized to load both images & youtube videos
       ********************************************************************************/
   
       function nggop_fancybox_inline_js() { ?>
   
       <!-- [nextgen gallery optimizer premium v<?php echo NGGOP_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
       <script type='text/javascript'>jQuery.noConflict(); jQuery(document).ready(function() { jQuery('a.myfancybox').fancybox({ 'zoomSpeedIn':500, 'zoomSpeedOut':500, 'overlayShow':true, 'overlayOpacity':0.3 }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
       <script type="text/javascript">jQuery.noConflict();jQuery(document).ready(function(){jQuery("a.myfancyboxvideo").click(function(){jQuery.fancybox({'hideOnContentClick': false, 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'width': 640, 'height': 390, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type': 'swf', 'swf': {'wmode': 'transparent', 'allowfullscreen': 'true'} }); return false; }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
   
       <?php
       }
       ```
   
 * Hope this helps!
 * Cheers,
    Mark.
 *  Thread Starter [stefsegers](https://wordpress.org/support/users/stefsegers/)
 * (@stefsegers)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106175)
 * Hi Mark, thanks for the great update of your plugin. Maybe it’s an idea to make
   to update final in a new version?
 * It looks like it’s working 🙂
 * Keep up the good work and thanks again.
 *  Plugin Author [Mark Jeldi](https://wordpress.org/support/users/mark-jeldi/)
 * (@mark-jeldi)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106177)
 * Hey Stefan,
 * No worries. Great to hear this video/image mod is working well for you! Since
   it’s a pretty extreme custom modification with hardcoded elements, I don’t think
   it’ll make it into Optimizer’s core…but it’s great to have explored what’s possible.
 * All the best,
    Mark.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘[Plugin: NextGEN Gallery Optimizer] youtube’ is closed to new replies.

 * ![](https://ps.w.org/nextgen-gallery-optimizer/assets/icon.svg?rev=1183755)
 * [NextGEN Gallery Optimizer](https://wordpress.org/plugins/nextgen-gallery-optimizer/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/nextgen-gallery-optimizer/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/nextgen-gallery-optimizer/)
 * [Active Topics](https://wordpress.org/support/plugin/nextgen-gallery-optimizer/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/nextgen-gallery-optimizer/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/nextgen-gallery-optimizer/reviews/)

## Tags

 * [video](https://wordpress.org/support/topic-tag/video/)
 * [Youtube](https://wordpress.org/support/topic-tag/youtube/)

 * 5 replies
 * 2 participants
 * Last reply from: [Mark Jeldi](https://wordpress.org/support/users/mark-jeldi/)
 * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-optimizer-youtube/#post-3106177)
 * Status: resolved