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

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="open video
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="open video
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>