Fancybox with Youtube API request

Question

I want my list of videos being pulled in from the youtube API to be opened in a fancybox. But right now when you click the image it just redirects to the youtube site.

Here is the relevant code. The html.erb

<% @youtube_news.each do |item| %>
        <li>
          <% you_tube_presenter_for(item) do |presenter| %>
              <span class="center videos">
               <%= link_to image_tag(presenter.thumbnail_url), presenter.video_url, :class=> "fancyboxv"  %>
              </span>
              <%= presenter.title %>
              <span class="timestamp">
               Posted <%= time_ago_in_words(presenter.published_date) %> ago
              </span>                                     
          <% end %>
        </li>
    <% end %>

And the JS on the same page-

<script>
$(document).ready(function(){
 $("a.fancyboxv").fancybox({
    'transitionIn'   : 'none',
    'transitionOut'  : 'elastic',
    'width'          : '640',
    'height'         : '480',
    'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
      'type'         : 'swf'
      'swf'          :{
             'wmode'          :'transparent',
             'allowfullscreen':'true'
      }
    });

 return false;
});
</script>

What am I missing here? Thanks in advance for your help on this.

score 2 · Accepted Answer · answered Aug 20 '12 at 08:08

2

try

$(document).ready(function(){
 $("a.fancyboxv").click(function() {
  $.fancybox({
   'transitionIn'   : 'none',
   'transitionOut'  : 'elastic',
   'width'          : '640',
   'height'         : '480',
   'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
   'type'           : 'swf',
   'swf'            : {
     'wmode'           : 'transparent',
     'allowfullscreen' : 'true'
    }
  }); // fancybox
  return false;
 }); // click
}); //  ready

answered Aug 20 '12 at 08:08

JFK

40,963
31
133
306

hmm unfortunately this didn't work. It sent me to the youtube website in the same tab. I'll have dig into the fancybox docs a bit further. [UPDATE] This worked perfectly after I restarted my server. Thanks for your help on this JFK, seriously. – computer_smile Aug 21 '12 at 03:22

score 0 · Answer 2 · edited May 23 '17 at 11:49

This is what solved it for me: https://stackoverflow.com/a/10882262/470749

$(".youtube").click(function() {
            var destination = $(this).attr('href').replace(new RegExp('youtu.be', 'i'), 'www.youtube.com/embed').replace(new RegExp('watch\\?v=([a-z0-9\_\-]+)(&|\\?)?(.*)', 'i'), 'embed/$1?version=3&$3');
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'none',
                'title'         : $(this).attr('title'),
                'width'         : 680,
                'height'        : 495,
                'href'          : destination,
                'type'          : 'iframe'
            });
            return false;
        });

HTML: <a class="youtube" href="//www.youtube.com/watch?v=XXXXXX&html5=1&autoplay=1#t=3s" target="_blank">link label</a>

My goal was to make the linked Youtube video pop up a Fancybox that auto-starts playing the video and works in IE/Chrome/Firefox/Safari even when Flash isn't installed. I just tested it in IE9 with Flash disabled, and it worked.

Fancybox with Youtube API request

2 Answers2