diff --git a/webroot/index.html b/webroot/index.html
index fcb1faac5..a8a6f711a 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -165,5 +165,7 @@ possible hacks
   <script src="js/utils.js"></script>
   <script src="js/message.js"></script>
   <script src="js/app.js"></script>
+  <script src="js/player/airplay.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/webroot/js/player/airplay.js b/webroot/js/player/airplay.js
new file mode 100644
index 000000000..ddec78981
--- /dev/null
+++ b/webroot/js/player/airplay.js
@@ -0,0 +1,23 @@
+videojs.hookOnce('setup', function (player) {
+  if (window.WebKitPlaybackTargetAvailabilityEvent) {
+    var videoJsButtonClass = videojs.getComponent('Button');
+    var concreteButtonClass = videojs.extend(videoJsButtonClass, {
+
+      // The `init()` method will also work for constructor logic here, but it is 
+      // deprecated. If you provide an `init()` method, it will override the
+      // `constructor()` method!
+      constructor: function () {
+        videoJsButtonClass.call(this, player);
+      }, // notice the comma
+
+      handleClick: function () {
+        const videoElement = document.getElementsByTagName('video')[0];
+        videoElement.webkitShowPlaybackTargetPicker();
+      }
+    });
+
+    var concreteButtonInstance = player.controlBar.addChild(new concreteButtonClass());
+    concreteButtonInstance.addClass("vjs-airplay");
+  }
+
+});
\ No newline at end of file
diff --git a/webroot/styles/layout.css b/webroot/styles/layout.css
index 61aa8d242..cef96ce2f 100644
--- a/webroot/styles/layout.css
+++ b/webroot/styles/layout.css
@@ -377,4 +377,8 @@ header h1 {
   height: 40vh;
   height: calc((var(--vh, 1vh) * 40));
   min-height: 300px;
+}
+
+.vjs-airplay .vjs-icon-placeholder::before {
+    content: 'AP';
 }
\ No newline at end of file