diff --git a/api/package-lock.json b/api/package-lock.json
index 06273be..888aa03 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -4,6 +4,14 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@ably/msgpack-js": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@ably/msgpack-js/-/msgpack-js-0.3.4.tgz",
+      "integrity": "sha512-gmnsxxcN/8WfoxZxQQF9LvM3ZUbuVH0LCS6oX7EJS+VfkXWBFIgDV+h7a0sntwKSvAEg4uJzNDje7kpH8/LJ3Q==",
+      "requires": {
+        "bops": "^1.0.1"
+      }
+    },
     "@apollo/federation": {
       "version": "0.20.7",
       "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.20.7.tgz",
@@ -2295,6 +2303,26 @@
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
     },
+    "ably": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/ably/-/ably-1.2.10.tgz",
+      "integrity": "sha512-noRdsvKQx2ajbbzj1m25Wz+vVGS7/ItYOMkxieypKIb2bb5PWK6Lu0A1p1WiKA87HkvYGpTeEfk3cMm7mVw/pA==",
+      "requires": {
+        "@ably/msgpack-js": "^0.3.3",
+        "request": "^2.87.0",
+        "ws": "^5.1"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "5.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.3.tgz",
+          "integrity": "sha512-jZArVERrMsKUatIdnLzqvcfydI85dvd/Fp1u/VOpfdDWQ4c9qWXe+VIeAbQ5FrDwciAkr+lzofXLz3Kuf26AOA==",
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
@@ -3397,6 +3425,22 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
       "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
     },
+    "bops": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bops/-/bops-1.0.1.tgz",
+      "integrity": "sha512-qCMBuZKP36tELrrgXpAfM+gHzqa0nLsWZ+L37ncsb8txYlnAoxOPpVp+g7fK0sGkMXfA0wl8uQkESqw3v4HNag==",
+      "requires": {
+        "base64-js": "1.0.2",
+        "to-utf8": "0.0.1"
+      },
+      "dependencies": {
+        "base64-js": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.0.2.tgz",
+          "integrity": "sha1-R0IRyV5s8qVH20YeT2d4tR0I+mU="
+        }
+      }
+    },
     "boxen": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
@@ -3634,6 +3678,11 @@
       "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
       "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g=="
     },
+    "buffer-writer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-writer/-/buffer-writer-2.0.0.tgz",
+      "integrity": "sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw=="
+    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -4144,6 +4193,29 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "cloudinary": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-1.26.1.tgz",
+      "integrity": "sha512-MiJFB7kVgd28/DDcIXmvcMm1wg/twMlynFELFF/7ZmgOPmUjjHUdI2f61KXA0yMGzMk0EUI9mqhGpruHjd2ybA==",
+      "requires": {
+        "cloudinary-core": "^2.10.2",
+        "core-js": "3.6.5",
+        "lodash": "^4.17.11",
+        "q": "^1.5.1"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+          "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
+        }
+      }
+    },
+    "cloudinary-core": {
+      "version": "2.11.4",
+      "resolved": "https://registry.npmjs.org/cloudinary-core/-/cloudinary-core-2.11.4.tgz",
+      "integrity": "sha512-F1BZczD6f5mB73D0c8gl/iuacVQQO+UhckNZxeeS9ZIVeIHbsfqwWiAZMQmIvEb7Wti/9MLU0xVwaWOak2THHA=="
+    },
     "cls-bluebird": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/cls-bluebird/-/cls-bluebird-2.1.0.tgz",
@@ -7173,6 +7245,15 @@
         "@formatjs/intl-numberformat": "^5.5.2"
       }
     },
+    "into-stream": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-5.1.1.tgz",
+      "integrity": "sha512-krrAJ7McQxGGmvaYbB7Q1mcA+cRwg9Ij2RfWIeVesNBgVDZmzY/Fa4IpZUT3bmdRzMzdf/mzltCG2Dq99IZGBA==",
+      "requires": {
+        "from2": "^2.3.0",
+        "p-is-promise": "^3.0.0"
+      }
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -7735,6 +7816,13 @@
         "tarn": "^3.0.1",
         "tildify": "2.0.0",
         "v8flags": "^3.2.0"
+      },
+      "dependencies": {
+        "pg-connection-string": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.4.0.tgz",
+          "integrity": "sha512-3iBXuv7XKvxeMrIgym7njT+HlZkwZqqGX4Bu9cci8xHZNT+Um1gWKqCsAzcC0d95rcKMU5WBg6YRUcHyV0HZKQ=="
+        }
       }
     },
     "koa": {
@@ -9397,6 +9485,11 @@
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
+    "p-is-promise": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-3.0.0.tgz",
+      "integrity": "sha512-Wo8VsW4IRQSKVXsJCn7TomUaVtyfjVDn3nUP7kE967BQk0CwFpdbZs0X0uk5sW9mkBa9eNM7hCMaG93WUAwxYQ=="
+    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -9452,6 +9545,11 @@
         }
       }
     },
+    "packet-reader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/packet-reader/-/packet-reader-1.0.0.tgz",
+      "integrity": "sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ=="
+    },
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
@@ -9657,10 +9755,79 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
+    "pg": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.6.0.tgz",
+      "integrity": "sha512-qNS9u61lqljTDFvmk/N66EeGq3n6Ujzj0FFyNMGQr6XuEv4tgNTXvJQTfJdcvGit5p5/DWPu+wj920hAJFI+QQ==",
+      "requires": {
+        "buffer-writer": "2.0.0",
+        "packet-reader": "1.0.0",
+        "pg-connection-string": "^2.5.0",
+        "pg-pool": "^3.3.0",
+        "pg-protocol": "^1.5.0",
+        "pg-types": "^2.1.0",
+        "pgpass": "1.x"
+      }
+    },
     "pg-connection-string": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.4.0.tgz",
-      "integrity": "sha512-3iBXuv7XKvxeMrIgym7njT+HlZkwZqqGX4Bu9cci8xHZNT+Um1gWKqCsAzcC0d95rcKMU5WBg6YRUcHyV0HZKQ=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.5.0.tgz",
+      "integrity": "sha512-r5o/V/ORTA6TmUnyWZR9nCj1klXCO2CEKNRlVuJptZe85QuhFayC7WeMic7ndayT5IRIR0S0xFxFi2ousartlQ=="
+    },
+    "pg-int8": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw=="
+    },
+    "pg-pool": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.3.0.tgz",
+      "integrity": "sha512-0O5huCql8/D6PIRFAlmccjphLYWC+JIzvUhSzXSpGaf+tjTZc4nn+Lr7mLXBbFJfvwbP0ywDv73EiaBsxn7zdg=="
+    },
+    "pg-protocol": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.5.0.tgz",
+      "integrity": "sha512-muRttij7H8TqRNu/DxrAJQITO4Ac7RmX3Klyr/9mJEOBeIpgnF8f9jAfRz5d3XwQZl5qBjF9gLsUtMPJE0vezQ=="
+    },
+    "pg-types": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "requires": {
+        "pg-int8": "1.0.1",
+        "postgres-array": "~2.0.0",
+        "postgres-bytea": "~1.0.0",
+        "postgres-date": "~1.0.4",
+        "postgres-interval": "^1.1.0"
+      }
+    },
+    "pgpass": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.4.tgz",
+      "integrity": "sha512-YmuA56alyBq7M59vxVBfPJrGSozru8QAdoNlWuW3cz8l+UX3cWge0vTvjKhsSHSJpo3Bom8/Mm6hf0TR5GY0+w==",
+      "requires": {
+        "split2": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "split2": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",
+          "integrity": "sha512-9NThjpgZnifTkJpzTZ7Eue85S49QwpNhZTq6GRJwObb6jnLFNGB7Qm73V5HewTROPyxD0C29xqmaI68bQtV+hg==",
+          "requires": {
+            "readable-stream": "^3.0.0"
+          }
+        }
+      }
     },
     "picomatch": {
       "version": "2.2.3",
@@ -9835,6 +10002,29 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
+    "postgres-array": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="
+    },
+    "postgres-bytea": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
+      "integrity": "sha1-AntTPAqokOJtFy1Hz5zOzFIazTU="
+    },
+    "postgres-date": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q=="
+    },
+    "postgres-interval": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "requires": {
+        "xtend": "^4.0.0"
+      }
+    },
     "prebuild-install": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-6.1.2.tgz",
@@ -10046,6 +10236,11 @@
         "extend": "^3.0.0"
       }
     },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -12702,6 +12897,15 @@
         "strapi-utils": "3.5.4"
       }
     },
+    "strapi-provider-upload-cloudinary": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/strapi-provider-upload-cloudinary/-/strapi-provider-upload-cloudinary-3.6.3.tgz",
+      "integrity": "sha512-2NNH+bmQNVoVVrXYbjlAlNVbJYRwOpDsgG6T2lzFoi/4FtnDcXgaKjYEzlcL4O4Ts0TJE63hBykUmE5I7OsBrQ==",
+      "requires": {
+        "cloudinary": "^1.25.1",
+        "into-stream": "^5.1.0"
+      }
+    },
     "strapi-provider-upload-local": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/strapi-provider-upload-local/-/strapi-provider-upload-local-3.5.4.tgz",
@@ -13252,6 +13456,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "to-utf8": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/to-utf8/-/to-utf8-0.0.1.tgz",
+      "integrity": "sha1-0Xrqcv8vujm55DYBvns/9y4ImFI="
+    },
     "toggle-selection": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
diff --git a/watch-party/components/Video/VideoPlayer.vue b/watch-party/components/Video/VideoPlayer.vue
index 9be2ea7..40cfd05 100644
--- a/watch-party/components/Video/VideoPlayer.vue
+++ b/watch-party/components/Video/VideoPlayer.vue
@@ -47,6 +47,7 @@ export default {
         case "play-event":
           this.myVideoPlayer.play();
           this.myVideoPlayer.currentTime(msg.data.currentTime);
+          this.myVideoPlayer.play();
           break;
         case "pause-event":
           this.myVideoPlayer.pause();
diff --git a/watch-party/package-lock.json b/watch-party/package-lock.json
index 9461cfc..ec18517 100644
--- a/watch-party/package-lock.json
+++ b/watch-party/package-lock.json
@@ -11555,9 +11555,12 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
     "mux.js": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
-      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.12.2.tgz",
+      "integrity": "sha512-9OY1lrFIo7FxMeIC6aLUftiNv97AztufDfi30N7qDll1Pcy7bCxlHztyHp1Ce0KQwy2XqchGeENPS4v1NJngHQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2"
+      }
     },
     "nan": {
       "version": "2.14.2",
@@ -16488,6 +16491,13 @@
         "video.js": "^5.19.1 || ^6.2.0",
         "videojs-contrib-media-sources": "4.7.2",
         "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        }
       }
     },
     "videojs-contrib-media-sources": {
@@ -16499,6 +16509,13 @@
         "mux.js": "4.3.2",
         "video.js": "^5.17.0 || ^6.2.0",
         "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        }
       }
     },
     "videojs-flash": {
diff --git a/watch-party/package.json b/watch-party/package.json
index 048d582..f49d515 100644
--- a/watch-party/package.json
+++ b/watch-party/package.json
@@ -18,6 +18,7 @@
     "core-js": "^3.8.3",
     "graphql": "^15.5.0",
     "graphql-tag": "^2.11.0",
+    "mux.js": "^5.12.2",
     "nuxt": "^2.14.12",
     "nuxt-fontawesome": "^0.4.0",
     "videojs-youtube": "^2.6.1",
diff --git a/watch-party/pages/gallery.vue b/watch-party/pages/gallery.vue
index 612c6bf..494315b 100644
--- a/watch-party/pages/gallery.vue
+++ b/watch-party/pages/gallery.vue
@@ -1,9 +1,36 @@
 <template>
   <div class="m-5">
+    <p class="gallery-msg">
+      Pick a video you'd like to stream with friends. Either choose from the
+      gallery or paste a YouTube link
+    </p>
     <div class="gallery-header">
-      <p class="gallery-msg">
-        Choose a video you'd like to stream with friends
-      </p>
+      <div class="youtube-input">
+        <input
+          type="text"
+          class="url-input"
+          placeholder="YouTube video URL"
+          v-model="youtubeVideoLink"
+        />
+        <NuxtLink
+          :to="{
+            path: 'room',
+            query: {
+              chosenVidType: 'youtube',
+              chosenVidRef: '',
+              chosenVidCode: '1234',
+              chosenVideoLink: 'someLinktodo',
+              roomCode: getWatchPartyRoomCode,
+              chosenVidUrl: youtubeVideoLink,
+              chosenVidThumb: ''
+            }
+          }"
+        >
+          <button class="load-btn">
+            LOAD
+          </button>
+        </NuxtLink>
+      </div>
       <div class="copy-code-section">
         <button class="action-btn" @click="copyBtnClicked()">
           {{ btnText }}
@@ -31,8 +58,8 @@
               chosenVideoLink: 'someLinktodo',
               roomCode: getWatchPartyRoomCode,
               chosenVidUrl: video.video.url,
-              chosenVidThumb: video.thumbnail.url,
-            },
+              chosenVidThumb: video.thumbnail.url
+            }
           }"
         >
           <p class="video-title">{{ video.title }}</p>
@@ -55,11 +82,12 @@ export default {
       copyClicked: null,
       btnText: "Copy shareable link",
       pathToWatchParty: null,
+      youtubeVideoLink: null,
       videos: []
     };
   },
   computed: {
-    ...mapGetters(["getShareableLink", "getWatchPartyRoomCode"]),
+    ...mapGetters(["getShareableLink", "getWatchPartyRoomCode"])
   },
   methods: {
     copyBtnClicked() {
@@ -99,11 +127,19 @@ export default {
 
 <style scoped lang="postcss">
 .gallery-header {
-  @apply flex text-left justify-between;
+  @apply text-left justify-between;
 }
-
-.gallery-msg {
-  @apply my-2 text-xs w-40;
+.youtube-input {
+  @apply my-2 text-xs w-full flex;
+}
+.url-input {
+  @apply block w-full rounded bg-gray-100 border border-gray-500;
+}
+.load-btn {
+  @apply rounded bg-gray-800 p-1 h-full text-white w-40 text-xs;
+}
+.load-btn:hover {
+  @apply bg-gray-900;
 }
 .action-btn {
   @apply rounded bg-gray-800 p-1 text-white w-40 text-xs;
@@ -114,7 +150,7 @@ export default {
 }
 
 .copy-code-section {
-  @apply flex justify-end mt-2 mb-2;
+  @apply mt-2 mb-2;
 }
 
 .video-gallery {
@@ -136,8 +172,8 @@ export default {
   width: 100%;
 }
 @screen sm {
-  .gallery-msg {
-    @apply w-1/2 text-sm;
+  .youtube-input {
+    @apply w-3/5 mr-2 text-sm;
   }
   .video-gallery {
     @apply grid-cols-2;
@@ -145,6 +181,12 @@ export default {
   .action-btn {
     @apply w-64;
   }
+  .gallery-header {
+    @apply flex;
+  }
+  .copy-code-section {
+    @apply flex justify-end;
+  }
 }
 
 @screen md {
@@ -156,12 +198,16 @@ export default {
     @apply rounded bg-gray-800 p-2 text-white w-64 text-base;
   }
 
+  .load-btn {
+    @apply text-base;
+  }
+
   .gallery-header {
     @apply flex text-center justify-between;
   }
 
-  .gallery-msg {
-    @apply p-2 my-auto text-base text-left;
+  .youtube-input {
+    @apply py-2 my-auto text-base text-left;
   }
 }
 </style>
diff --git a/watch-party/pages/room.vue b/watch-party/pages/room.vue
index 233b127..f36b281 100644
--- a/watch-party/pages/room.vue
+++ b/watch-party/pages/room.vue
@@ -171,9 +171,10 @@ export default {
       this.showVideo = true;
       this.setVideoStatusUpdate({
         isVideoChosen: true,
+        chosenVidType: this.$route.query.chosenVidType,
         chosenVideoRef: this.$route.query.chosenVidRef,
         chosenVideoUrl: this.$route.query.chosenVidUrl,
-        chosenVideoThumb: this.$route.query.chosenVidThumb,
+        chosenVideoThumb: this.$route.query.chosenVidThumb
       });
       this.publishCurrentVideoStatus("video-chosen");
     } else {
diff --git a/watch-party/store/index.js b/watch-party/store/index.js
index 88c90d4..04f1a9c 100644
--- a/watch-party/store/index.js
+++ b/watch-party/store/index.js
@@ -1,5 +1,6 @@
 import Vuex from "vuex";
 import * as Ably from "ably";
+import videojs from "videojs-youtube";
 
 const createStore = () => {
   return new Vuex.Store({
@@ -33,6 +34,7 @@ const createStore = () => {
       didAdminLeave: false,
       onlineMembersArr: [],
       currentVideoStatus: {
+        chosenVidType: null,
         isVideoChosen: false,
         didStartPlayingVideo: false,
         chosenVideoUrl: null,
@@ -51,7 +53,6 @@ const createStore = () => {
         // width: "550px",
         // height: "300px",
         liveui: true,
-        playbackRates: [0.7, 1.0, 1.5, 2.0], //Playback speed
         sources: [
           {
             type: "video/mp4",
@@ -91,6 +92,10 @@ const createStore = () => {
           state.currentVideoStatus.chosenVideoUrl;
         latestVideoPlayerOptions.poster =
           state.currentVideoStatus.chosenVideoThumb;
+        if (state.currentVideoStatus.chosenVidType === "youtube") {
+          latestVideoPlayerOptions.sources[0].type = "video/youtube";
+          latestVideoPlayerOptions.techOrder = ["youtube"];
+        }
         return latestVideoPlayerOptions;
       }
     },