diff --git a/openvidu-iframe/nginx.conf b/openvidu-iframe/nginx.conf
new file mode 100644
index 00000000..aeec59a5
--- /dev/null
+++ b/openvidu-iframe/nginx.conf
@@ -0,0 +1,74 @@
+# This NGNIX configuration is prepared to work against application openvidu-hello-world
+# (https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-hello-world) being
+# served on port 8080. For compatibility with other web applications, adaptations might
+# be needed on elements http>upstream and http>server>location
+
+events {
+ worker_connections 512;
+}
+http {
+ upstream openvidu-deployment {
+ server host.docker.internal:4443;
+ }
+ upstream server-application {
+ server host.docker.internal:5000;
+ }
+ upstream iframe-application {
+ server host.docker.internal:8081;
+ }
+ upstream client-application {
+ server host.docker.internal:8080;
+ }
+ server {
+ listen 443 ssl;
+ ssl_certificate /etc/nginx/certs/cert.pem;
+ ssl_certificate_key /etc/nginx/certs/key.pem;
+
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header X-Forwarded-Proto https;
+ proxy_headers_hash_bucket_size 512;
+ proxy_redirect off;
+
+ # Websockets
+ proxy_http_version 1.1;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "upgrade";
+
+ # OpenVidu deployment API
+ location /openvidu/api {
+ proxy_pass http://openvidu-deployment;
+ }
+
+ # OpenVidu WebSocket
+ location ~ /openvidu$ {
+ proxy_pass http://openvidu-deployment;
+ }
+
+ # Server application requests
+ location /api/ {
+ proxy_pass http://server-application;
+ }
+
+ # Iframe application requests
+ location / {
+ proxy_pass http://iframe-application;
+ }
+
+ # Client application requests. This is specific to application openvidu-hello-world
+ location /hello-world {
+ proxy_pass http://client-application/;
+ }
+ location /app.js {
+ proxy_pass http://client-application;
+ }
+ location /style.css {
+ proxy_pass http://client-application;
+ }
+ location ~ /openvidu-browser-.+\.js {
+ proxy_pass http://client-application;
+ }
+ }
+}
\ No newline at end of file
diff --git a/openvidu-iframe/web/index.html b/openvidu-iframe/web/index.html
index 88a81f0b..1a971143 100644
--- a/openvidu-iframe/web/index.html
+++ b/openvidu-iframe/web/index.html
@@ -13,7 +13,7 @@
-
+
diff --git a/openvidu-iframe/web/style.css b/openvidu-iframe/web/style.css
deleted file mode 100644
index d5971806..00000000
--- a/openvidu-iframe/web/style.css
+++ /dev/null
@@ -1,271 +0,0 @@
-html {
- position: relative;
- min-height: 100%;
-}
-
-.openvidu-iframe{
- width: 100%;
- height: 70%;
-}
-
-nav {
- height: 50px;
- width: 100%;
- z-index: 1;
- background-color: #4d4d4d !important;
- border-color: #4d4d4d !important;
- border-top-right-radius: 0 !important;
- border-top-left-radius: 0 !important;
-}
-
-.navbar-header {
- width: 100%;
-}
-
-.nav-icon {
- padding: 5px 15px 5px 15px;
- float: right;
-}
-
-nav a {
- color: #ccc !important;
-}
-
-nav i.fa {
- font-size: 40px;
- color: #ccc;
-}
-
-nav a:hover {
- color: #a9a9a9 !important;
-}
-
-nav i.fa:hover {
- color: #a9a9a9;
-}
-
-#main-container {
- padding-bottom: 80px;
-}
-
-/*vertical-center {
- position: relative;
- top: 30%;
- left: 50%;
- transform: translate(-50%, -50%);
-}*/
-
-.horizontal-center {
- margin: 0 auto;
-}
-
-.form-control {
- color: #0088aa;
- font-weight: bold;
-}
-
-.form-control:focus {
- border-color: #0088aa;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
-}
-
-input.btn {
- font-weight: bold;
-}
-
-.btn {
- font-weight: bold !important;
-}
-
-.btn-success {
- background-color: #06d362 !important;
- border-color: #06d362;
-}
-
-.btn-success:hover {
- background-color: #1abd61 !important;
- border-color: #1abd61;
-}
-
-.footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 60px;
- background-color: #4d4d4d;
-}
-
-.footer .text-muted {
- margin: 20px 0;
- float: left;
- color: #ccc;
-}
-
-.openvidu-logo {
- height: 35px;
- float: right;
- margin: 12px 0;
- -webkit-transition: all 0.1s ease-in-out;
- -moz-transition: all 0.1s ease-in-out;
- -o-transition: all 0.1s ease-in-out;
- transition: all 0.1s ease-in-out;
-}
-
-.openvidu-logo:hover {
- -webkit-filter: grayscale(0.5);
- filter: grayscale(0.5);
-}
-
-.demo-logo {
- margin: 0;
- height: 22px;
- float: left;
- padding-right: 8px;
-}
-
-a:hover .demo-logo {
- -webkit-filter: brightness(0.7);
- filter: brightness(0.7);
-}
-
-#join-dialog {
- margin-left: auto;
- margin-right: auto;
- max-width: 70%;
-}
-
-#join-dialog h1 {
- color: #4d4d4d;
- font-weight: bold;
- text-align: center;
-}
-
-#img-div {
- text-align: center;
- margin-top: 3em;
- margin-bottom: 3em;
- /*position: relative;
- top: 20%;
- left: 50%;
- transform: translate(-50%, -50%);*/
-}
-
-#img-div img {
- height: 15%;
-}
-
-#join-dialog label {
- color: #0088aa;
-}
-
-#join-dialog input.btn {
- margin-top: 15px;
-}
-
-#session-header {
- margin-bottom: 20px;
-}
-
-#session-title {
- display: inline-block;
-}
-
-#buttonLeaveSession {
- float: right;
- margin-top: 20px;
-}
-
-#video-container video {
- position: relative;
- float: left;
- width: 50%;
- cursor: pointer;
-}
-
-#video-container div {
- float: left;
- width: 50%;
- position: relative;
- margin-left: -50%;
-}
-
-#video-container p {
- display: inline-block;
- background: #f8f8f8;
- padding-left: 5px;
- padding-right: 5px;
- color: #777777;
- font-weight: bold;
- border-bottom-right-radius: 4px;
-}
-
-video {
- width: 100%;
- height: auto;
-}
-
-#main-video p {
- position: absolute;
- display: inline-block;
- background: #f8f8f8;
- padding-left: 5px;
- padding-right: 5px;
- font-size: 22px;
- color: #777777;
- font-weight: bold;
- border-bottom-right-radius: 4px;
-}
-
-#session img {
- width: 100%;
- height: auto;
- display: inline-block;
- object-fit: contain;
- vertical-align: baseline;
-}
-
-#session #video-container img {
- position: relative;
- float: left;
- width: 50%;
- cursor: pointer;
- object-fit: cover;
- height: 180px;
-}
-
-
-/* xs ans md screen resolutions*/
-
-@media screen and (max-width: 991px) and (orientation: portrait) {
- #join-dialog {
- max-width: inherit;
- }
- #img-div img {
- height: 10%;
- }
- #img-div {
- margin-top: 2em;
- margin-bottom: 2em;
- }
- .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
- margin-right: 0;
- margin-left: 0;
- }
- .navbar-header i.fa {
- font-size: 30px;
- }
- .navbar-header a.nav-icon {
- padding: 7px 3px 7px 3px;
- }
-}
-
-@media only screen and (max-height: 767px) and (orientation: landscape) {
- #img-div {
- margin-top: 1em;
- margin-bottom: 1em;
- }
- #join-dialog {
- max-width: inherit;
- }
-}
\ No newline at end of file
diff --git a/openvidu-iframe/web/styles.css b/openvidu-iframe/web/styles.css
new file mode 100644
index 00000000..06ba5283
--- /dev/null
+++ b/openvidu-iframe/web/styles.css
@@ -0,0 +1,109 @@
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+.openvidu-iframe{
+ width: 100%;
+ height: 70%;
+}
+
+nav {
+ height: 50px;
+ width: 100%;
+ z-index: 1;
+ background-color: #4d4d4d !important;
+ border-color: #4d4d4d !important;
+ border-top-right-radius: 0 !important;
+ border-top-left-radius: 0 !important;
+}
+
+.navbar-header {
+ width: 100%;
+}
+
+.nav-icon {
+ padding: 5px 15px 5px 15px;
+ float: right;
+}
+
+nav a {
+ color: #ccc !important;
+}
+
+nav i.fa {
+ font-size: 40px;
+ color: #ccc;
+}
+
+nav a:hover {
+ color: #a9a9a9 !important;
+}
+
+nav i.fa:hover {
+ color: #a9a9a9;
+}
+
+#main-container {
+ padding-bottom: 80px;
+}
+
+.horizontal-center {
+ margin: 0 auto;
+}
+
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 60px;
+ background-color: #4d4d4d;
+}
+
+.footer .text-muted {
+ margin: 20px 0;
+ float: left;
+ color: #ccc;
+}
+
+.openvidu-logo {
+ height: 35px;
+ float: right;
+ margin: 12px 0;
+ -webkit-transition: all 0.1s ease-in-out;
+ -moz-transition: all 0.1s ease-in-out;
+ -o-transition: all 0.1s ease-in-out;
+ transition: all 0.1s ease-in-out;
+}
+
+.openvidu-logo:hover {
+ -webkit-filter: grayscale(0.5);
+ filter: grayscale(0.5);
+}
+
+.demo-logo {
+ margin: 0;
+ height: 22px;
+ float: left;
+ padding-right: 8px;
+}
+
+a:hover .demo-logo {
+ -webkit-filter: brightness(0.7);
+ filter: brightness(0.7);
+}
+
+/* xs ans md screen resolutions*/
+
+@media screen and (max-width: 991px) and (orientation: portrait) {
+ .container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header {
+ margin-right: 0;
+ margin-left: 0;
+ }
+ .navbar-header i.fa {
+ font-size: 30px;
+ }
+ .navbar-header a.nav-icon {
+ padding: 7px 3px 7px 3px;
+ }
+}
\ No newline at end of file