How to display IFRAME inside jQuery UI dialog box

Question

The web application that I am updating uses jQuery and jQuery UI. I replaced most instances of window.open and <a target=_blank> the jQuery UI dialog box. For example, the terms and conditions used to open in a new window; I now use the jQuery UI dialog with AJAX. For consistency, I plan to use it where possible.

One such place is the page where I will have external links to the video. Something like:

 <a href="http://website.com/videos/1.html" target="_blank"><img src="http://website.com/videos/1.png"></a> <a href="http://website.com/videos/2.html" target="_blank"><img src="http://website.com/videos/2.png"></a> 

In some situations, I can use target=iframe1 . Now, instead of opening the contents in an iframe or popup, I want to display the contents inside the popup dialog. How can I use the jQuery UI dialog to achieve this? Will there be any errors?

Answer 1

There are several ways to do this, but I'm not sure which one is the best. The first approach is that you can add an iFrame to the dialog container on the fly using this link:

 $("#dialog").append($("<iframe />").attr("src", "your link")).dialog({dialogoptions}); 

Another would be to load the contents of your external link into a dialog container using ajax.

 $("#dialog").load("yourajaxhandleraddress.htm").dialog({dialogoptions}); 

Both work fine, but depend on external content.

Answer 2

The problems were:

• iframe content comes from another domain
• Iframe sizes should be adjusted for each video

A solution based on omerkirk's answer includes:

• Creating an iframe
• Creating a dialog with autoOpen: false, width: "auto", height: "auto"
• Specifying the source, width, and height of the iframe before opening the dialog box

Here is a rough code diagram:

HTML

 <div class="thumb"> <a href="http://jsfiddle.net/yBNVr/show/" data-title="Std 4:3 ratio video" data-width="512" data-height="384"><img src="http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video" /></a></li> <a href="http://jsfiddle.net/yBNVr/1/show/" data-title="HD 16:9 ratio video" data-width="512" data-height="288"><img src="http://dummyimage.com/120x90/000/f00&text=HD+16-9+ratio+video" /></a></li> </div> 

JQuery

 $(function () { var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>'); var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({ autoOpen: false, modal: true, resizable: false, width: "auto", height: "auto", close: function () { iframe.attr("src", ""); } }); $(".thumb a").on("click", function (e) { e.preventDefault(); var src = $(this).attr("href"); var title = $(this).attr("data-title"); var width = $(this).attr("data-width"); var height = $(this).attr("data-height"); iframe.attr({ width: +width, height: +height, src: src }); dialog.dialog("option", "title", title).dialog("open"); }); }); 

Demo here and code here . And another example in similar lines