JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class="live-example">
    <input data-bind='value: myURL' />
    <button data-bind='click: initLinkPreview'>Show Preview</button>
    <br/>
    <br/>
    <!-- ko if: showPreview -->
    <iframe class="link-preview" data-bind="attr: {target: '_top', src: myURL}" sandbox='' scrolling="no"></iframe>
    <!-- /ko -->
</div>

CSS

.live-example {
    height: 200px !important;
    overflow: hidden;
}
.link-preview {
    width: 1028px;
    height: 800px;
    border: none;
    pointer-events: none;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

JavaScript

var MyViewModel = function MyViewModel() {
    var self = this;
    self.myURL = ko.observable('http://jes.al/');
    self.showPreview = ko.observable();

    self.initLinkPreview = function () {
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: {
                json: '{"headers":{"x-frame-options":"ALLOW"}}'
            },
            success: function (data) {
                var headers = data.headers;
                if (headers['x-frame-options'] && (headers['x-frame-options'].toUpperCase() == 'DENY' || headers['x-frame-options'].toUpperCase() == 'SAMEORIGIN')) {
                    self.showPreview(false);
                } else {
                    self.showPreview(true);
                }
            }
        });

    };
};

ko.applyBindings(new MyViewModel());