Untitled

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="VirtualTour360.CanvasWebGL.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="Build/UnityLoader.js"></script>

    <script>
        var gameInstance = UnityLoader.instantiate("gameContainer", "Build/CanvasWebGL.json");
        var scaleToFit;
        try {
            scaleToFit = !!JSON.parse("true");
        } catch (e) {
            scaleToFit = true;
        }
        window.onresize = function () {
            var canvas = gameInstance.Module.canvas;
            var container = gameInstance.container;
            var w;
            var h;

            if (scaleToFit) {
                w = window.innerWidth;
                h = window.innerHeight;

                var r = 720 / 1280;

                if (w * r > window.innerHeight) {
                    w = Math.min(w, Math.ceil(h / r));
                }
                h = Math.floor(w * r);
            } else {
                w = 1280;
                h = 720;
            }

            container.style.width = canvas.style.width = w + "px";
            container.style.height = canvas.style.height = h + "px";
            container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
            container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";
        }
    </script>
    <style>
        html, body {
            background: #000;
            background: black;
            width: 100%;
            height: 100%;
            overflow: visible;
            padding: 0;
            margin: 0;
        }

        div#gameContainer {
            background: transparent !important;
            position: absolute;
        }

            div#gameContainer canvas {
                position: absolute;
                image-rendering: optimizeSpeed;
                image-rendering: -webkit-crisp-edges;
                image-rendering: -moz-crisp-edges;
                image-rendering: -o-crisp-edges;
                image-rendering: crisp-edges;
                image-rendering: -webkit-optimize-contrast;
                image-rendering: optimize-contrast;
                image-rendering: pixelated;
                -ms-interpolation-mode: nearest-neighbor;
            }
    </style>

</head>
<body onload="window.onresize();">

    <form id="form1" runat="server">

        <div id="gameContainer"></div>

        <div class="container">

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <%--                        <url id="link"> "www.google.cld" </url>--%>
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" onclick="Close(); return false;">&times;</button>
                            <%--<h4 class="modal-title">Modal Header</h4>--%>
                        </div>
                        <div class="modal-body">

                            <div class="embed-responsive embed-responsive-16by9">

                                <iframe src="https://player.vimeo.com/video/256428869" id="myVideo" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                                <p><a href="https://vimeo.com/256428869">Projeto Design Vision 2&ordf; Edi&ccedil;&atilde;o - Instituto Focus T&ecirc;xtil</a> from <a href="https://vimeo.com/supernovaonline">Supernova</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
                            </div>

                            <%--<p>This is a large modal.</p>--%>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModal" onclick="Close(); return false;">Close</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </form>
    <script>
        const test = () => {
            $('#myModal').modal('show');
            //document.getElementById('link').innerHTML = link;
        }

        function Close() {
            //gameInstance.SendMessage("FreeLookCameraRig", "HandleModalClosed");
            //$("#myModal").modal("hide");
            //$('#myModal').remove();
            $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
        }
    </script>
</body>
</html>