JSFiddle - React, Tailwind, and code Playground

by jstenkvist

HTML

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

CSS

/*body {
    font: 10px sans-serif;
}
*/

JavaScript

$(function () {
		var title = "FNG";
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div id='Dandy'></div>").append(iframe).appendTo("body").dialog({
     		title: title,
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
        		console.log(dialog);
            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("open");
    });
});