diff --git a/index.html b/index.html
index 2cb0ddcdb..db5a794fc 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,12 @@
 
         <!-- Demo Video -->
         <div class="demo">
-            <img class="thumbnail" src="/images/home/demo-thumbnail.jpg"
-                 alt="Screenshot of Guacamole 0.9.4"/>
-             <iframe
-                src="//player.vimeo.com/video/116207678?title=0&amp;byline=0&amp;portrait=0"
-                frameborder="0" webkitallowfullscreen mozallowfullscreen
-                allowfullscreen></iframe>
+            <video controls poster="/images/home/demo-thumbnail.jpg">
+                <source src="/videos/guacamole-0.9.4-demo.mp4" type="video/mp4"/>
+                <source src="/videos/guacamole-0.9.4-demo.webm" type="video/webm"/>
+                <img class="thumbnail" src="/images/home/demo-thumbnail.jpg"
+                     alt="Screenshot of Guacamole 0.9.4"/>
+            </video>
         </div>
 
         <!-- High-level description -->
diff --git a/styles/_home.scss b/styles/_home.scss
index 8fd2a9941..38e6d0fe9 100644
--- a/styles/_home.scss
+++ b/styles/_home.scss
@@ -221,19 +221,12 @@ a[href].latest-release:hover .action {
     max-width: 50%;
 }
 
-.demo img.thumbnail {
+.demo img.thumbnail,
+.demo video {
     width: 600px;
     max-width: 100%;
 }
 
-.demo iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
 @media screen and (max-width: 1000px) {
     .hook .readable-content {
         display: block;
diff --git a/videos/guacamole-0.9.4-demo.mp4 b/videos/guacamole-0.9.4-demo.mp4
new file mode 100644
index 000000000..afb7305bf
Binary files /dev/null and b/videos/guacamole-0.9.4-demo.mp4 differ
diff --git a/videos/guacamole-0.9.4-demo.webm b/videos/guacamole-0.9.4-demo.webm
new file mode 100644
index 000000000..b3fd960a4
Binary files /dev/null and b/videos/guacamole-0.9.4-demo.webm differ