Question

I’ve been through numerous posts in relation to this but I just can’t get to the bottom of it. I have a video on the home page of my website. When a visitor clicks the play video graphic a YouTube video is played within a Fancybox modal. I want to send an email newsletter encouraging subscribers to watch the video by clicking a link in the newsletter which takes them to my site and automatically launches the Fancybox modal playing the video. However I cannot get this to work. In my head tag I have:

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="{$base_url}/assets/js/fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="{$base_url}/assets/js/fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="{$base_url}/assets/js/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

<script type="text/javascript">
  $(document).ready(function() {
    $('#video-intro').fancybox({
      openEffect : 'none',
      closeEffect : 'none',
      prevEffect : 'none',
      nextEffect : 'none',
      arrows : false,
      width   : '640',
      height    : '360',
      helpers : {
        media : {}
        buttons : {}
      }
    });
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#video-intro").trigger('click');​
  });
 </script> 

An in my body I have the following link:

<a id="video-intro" href="http://www.youtube.com/embed/Scd0dmAod-k?rel=0" onClick=”_gaq.push(['_trackEvent', 'Video', 'Play', 'RentPro Overview Video']);”><img src="{$base_url}assets/img/play-video.png" width="425" height="239" alt="Click to play RentPro overview video" style="border:1px solid #fff;" /></a>

However I cannot get this to automatically display the modal and play the video on page load. The actual href has an onClick event to register an event with Google Analytics.

Answer 1

A single script should be enough :

$(document).ready(function() {
    $('#video-intro').fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        prevEffect: 'none',
        nextEffect: 'none',
        arrows: false,
        width: 640,
        height: 360,
        helpers: {
            media: {},
            buttons: {}
        },
        type: "iframe"
    }).trigger("click");
}); // ready

NOTICE that I corrected from your script the following:

• Integer values go without quotes
• There was a missing comma after media : {}, //<-- comma here to separate it from the following option buttons: {}
• I set the .trigger("click") to the same selector so no need of two different scripts
• Since you are using youtube’s embed form, I added type: "iframe" to the API options

See it working in this jsfiddle

The analytics onclick shouldn’t be an issue as you can see in the console.log