Fancybox 2 Title "Inside" on YouTube (iframe)?

Question

Is it possible to put the title "inside" when using Fancybox 2 for YouTube/iFrame content? Anytime I try to insert

title: {
    type: 'inside'
}

the video then plays in a new window at full screen. Here is what I'm currently using:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="lib/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lib/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $(".vids").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '60%',
            height      : '60%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
      });
  });
</script>

As a bonus, I would like the Title text to contain a link that opens _blank if it's possible.

Also, perhaps related, to make videos play in all browsers, I have to alter the YouTube links, rather than doing something like:

<a class="vids fancybox.iframe" href="http://www.youtube.com/watch?v=whatever">

I have to change it, and insert the word "embed", such as:

<a class="vids fancybox.iframe" href="http://www.youtube.com/embed/whatever">

Is this a proper method?

Thanks in advance.

Answer 1

Many question eh?

First, to get the title inside the fancybox use the option helpers like

helpers: {  title : { type : 'inside' } }

Second, to set a title with a link ... I would advice to you to set a data-* attribute in your anchor so the link won't show up in the normal browser's tooltip ... something like

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

Notice that I didn't add target="_blank" since clicking on the link will navigate automatically to the next page (and closing fancybox)

Then use the callback beforeShow to construct the title

beforeShow: function(){
 this.title = this.title + " " + $(this.element).data("caption");
}

Third, the proper way to display youtube videos is having a normal link (like in me second example above) and no more. Then include the fancybox-media js file in your document like

<script type="text/javascript" src="lib/helpers/jquery.fancybox-media.js"></script>

(check your own path)

... and use the helpers option to set the media like

helpers : {media : {} }

so, summarizing, your html should be something like

<a class="vids" href="http://www.youtube.com/watch?v=whatever" title="normal title" data-caption="<a href='{new link}' >See more</a>">open video</a>

and your fancybox custom script like

<script type="text/javascript">
$(document).ready(function() {
 $(".vids").fancybox({
  maxWidth    : 800,
  maxHeight   : 600,
  fitToView   : false,
  width       : '60%',
  height      : '60%',
  autoSize    : false,
  closeClick  : false,
  openEffect  : 'none',
  closeEffect : 'none',
  helpers     : {  
        title : { type : 'inside' },
        media : {}
  },
  beforeShow: function(){
   this.title = this.title + " " + $(this.element).data("caption");
  }
 });
});
</script>