Fancybox - hommepage- youtube video

[LauraPresta]

Hello guys,

 

I finally succeded to use fancybox on homepage with youtube video inside.

 

This is how i did, could you tell me if it could make some issues on other page or other script loading ? for now i dont see mistake in other page

 

i hope too this could help some other people

 

In end of header.tpl i added :

 

 

 <script type="text/javascript" src="/js/jquery/plugins/fancybox/jquery.fancybox.js"></script>

<link rel="stylesheet" href="/js/jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

 

<script type="text/javascript">

    $(document).ready(function() {

        $("a.fancybox").fancybox();

    });

</script>

 

<script type="text/javascript">

            $(document).ready(function() {

                $(".various").fancybox({

                    maxWidth    : 800,

                    maxHeight   : 600,

                    fitToView   : false,

                    width       : '70%',

                    height      : '70%',

                    autoSize    : false,

                    closeClick  : false,

                    openEffect  : 'elastic',

                    closeEffect : 'none',

                    beforeLoad  : function(){

                        var url= $(this.element).attr("href");

                        url = url.replace(new RegExp("watch\\?v=", "i"), 'v/');

                        url += '?fs=1&autoplay=1';

                        this.href = url

                    }

                });

            });

        </script>

 

And this is the code for the fancybox :

 

 

 

<a class="various fancybox.iframe" href="https://www.youtube.com/embed/q4a9CKgLprQ?rel=0&showinfo=0" frameborder="0" allowfullscreen"><img src="images/image_small.jpg" alt=""/></a>

 

Do you think it is correct use ? (even if it seems to work im scared it is not correct and will make some issue)

Edited December 30, 2016 by LauraPresta (see edit history)