Jquery Fancybox is not working with youtube

Question

First, I am not good with javascript and jquery .I have video urls like this :

http://www.youtube.com/v/u62EpfeUrG4?version=3&f=videos&app=youtube_gdata

I am using jinja2 for templating (this code includes some JS for fancybox with images). My problem is only with youtube videos.

And I wrote this code (Edited):

<!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/lib/jquery.mousewheel-3.0.6.pack.js') }}"></script>
    <!-- Add fancyBox -->
    <link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.css') }}" type="text/css" media="screen" />
    <script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/jquery.fancybox.pack.js') }}"></script>   
    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.css') }}" type="text/css" media="screen" />
    <script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-buttons.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-media.js') }}"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.css') }}" type="text/css" media="screen" />
    <script type="text/javascript" src="{{ url_for('static', filename='js/fancybox/source/helpers/jquery.fancybox-thumbs.js') }}"></script> 
    <script type="text/javascript">$(document).ready(function() { $(".fancybox").fancybox();});</script>
    <script type="text/javascript">$("a.fancytitle").fancybox({'titlePosition': 'inside','titleFormat': function() {return $('.fancytitle').attr('title');}});</script>
    <script type="text/javascript">
$('.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
    });
});
    </script>

This is where I want to show an icon, that when I click on it, the fancybox frame should appear with the video .

{% if items.trailers %}
                <a href="{{items.trailers.ytb_url}}" id="video" class="video">
                <img class="trailer" src="{{url_for('static', filename='img/video.png')}}" title="{{items.title}}-{{items.trailers.ytb_title}}"/>
                </a>
{% endif %}

This doesn't work , when I click on the image, it works without fancybox.

Any suggestions ?

Solution found :

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        var thisHref = this.href
        $(this).fancybox({
            "padding": 0,
            "type": 'iframe',
            "href" : thisHref+"&wmode=opaque;autoplay=1"
        });
    }); 
  }); 
})(jQuery);