Being pretty new to jquery, I've spent several hours trying to open video url links into a dialog. I just cant seem to get it right... either dialog wont show, it will show the same vid regardless which clicked, or it will append to bottom of page. Someone please help?
Ultimately, I'd like to have something more flexible/efficient. I wanted to try and use like a media plugin, but not sure how or which.
I just want to be able to open video and pdf links in dialog and have the dialog resize to content, maybe with a max size...
There is a better way, right?
EDIT: SOLVED
DIV:
<div id="divwrapper">
<div id="dialog"><object width="480" height="385"><param name="movie" value="{VIDURL}"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="{VIDURL}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div>
</div>
CODE:
$(function(){
// Dialog
$('div#dialog').dialog({
autoResize:true,
autoOpen: false,
autoOpen: false,
width: 660,
buttons: {
"Close": function() {
$(this).dialog("close");
$(this).remove();
}
}
});
// Dialog Link
$('.dialog_link').click(function(){
var vurl = $(this).attr("rel");
var diadiv = $('div#dialog');
if (diadiv.length < 1)
{
$('#divwrapper').append('<div id="dialog"><object width="480" height="385"><param name="movie" value="'+vurl+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+vurl+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div>').hide();
}
else
{
var vurl = $(this).attr("rel");
var dicont = $('div#dialog').html();
var newcont = dicont.replace("{VIDURL}",vurl);
$('div#dialog').html(newcont);
}
$('div#dialog').dialog('open');
return false;
});
});
LINKS:
<a href="javascript:void()" rel="http://www.youtube.com/v/WiBA0lS_lwg&amp;hl=en_US&amp;fs=1" id="vl1" class="dialog_link">Open Dialog</a>
<a href="javascript:void()" rel="http://www.youtube.com/v/QQORnYPqU3A&amp;hl=en_US&amp;fs=1" id="vl2" class="dialog_link">Open Dialog</a>