title: Jquery Fancybox is not working with youtube
body: <p>First, I am not good with javascript and jquery .I have video urls like this : </p>
  
  <p><a href="http://www.youtube.com/v/u62EpfeUrG4?version=3&amp;f=videos&amp;app=youtube_gdata" rel="nofollow">http://www.youtube.com/v/u62EpfeUrG4?version=3&amp;f=videos&amp;app=youtube_gdata</a></p>
  
  <p>I am using jinja2 for templating (this code includes some JS for fancybox with images).
  My problem is only with youtube videos. </p>
  
  <p>And I wrote this code (Edited):</p>
  
  <pre><code>&lt;!-- Add jQuery library --&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;!-- Add mousewheel plugin (this is optional) --&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"&gt;&lt;/script&gt;
      &lt;!-- Add fancyBox --&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.css') }}" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.pack.js') }}"&gt;&lt;/script&gt;   
      &lt;!-- Optionally add helpers - button, thumbnail and/or media --&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.css') }}" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.js') }}"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-media.js') }}"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.css') }}" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.js') }}"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript"&gt;$(document).ready(function() { $(".fancybox").fancybox();});&lt;/script&gt;
      &lt;script type="text/javascript"&gt;$("a.fancytitle").fancybox({'titlePosition': 'inside','titleFormat': function() {return $('.fancytitle').attr('title');}});&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  $('.video').on('click', function(event) {
      event.preventDefault();
      $.fancybox({
          'type' : 'iframe',        
          'href' : this.href,
          'overlayShow' : true,
          'centerOnScroll' : true,
          'speedIn' : 100,
          'speedOut' : 50,
          'width' : 640,
          'height' : 480
      });
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>This is where I want to show an icon, that when I click on it, the fancybox frame should appear with the video . </p>
  
  <pre><code>{% if items.trailers %}
                  &lt;a href="{{items.trailers.ytb_url}}" id="video" class="video"&gt;
                  &lt;img class="trailer" src="{{url_for('static', filename='img/video.png')}}" title="{{items.title}}-{{items.trailers.ytb_title}}"/&gt;
                  &lt;/a&gt;
  {% endif %}
  </code></pre>
  
  <p>This doesn't work , when I click on the image, it works without fancybox. </p>
  
  <p>Any suggestions ? </p>
  
  <p><strong>Solution found :</strong> </p>
  
  <pre><code>(function ($) {
    $(document).ready(function(){
      $('a[href*=youtube]').each(function () {
          var thisHref = this.href
          $(this).fancybox({
              "padding": 0,
              "type": 'iframe',
              "href" : thisHref+"&amp;amp;wmode=opaque;autoplay=1"
          });
      }); 
    }); 
  })(jQuery);
  </code></pre>