Got automatic video embed to work

Author: emilbaehr

_includes/screencontent.html

@@ -0,0 +1,48 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+{% for file in site.static_files %}
+    {% if file.path contains 'assets/videos' %}
+        {% if file.extname == ".mov" %}
+            <script>
+                $(function() {
+                    $(".videoContainer").removeClass("hidden");
+                    $(".screenvideo").append('<source src="{{ file.path }}" type="video/mp4">');
+                    console.log("{{ file.path }}");
+                });
+            </script>
+        {% elsif file.extname == ".ogg" %}
+            <script>
+                $(function() {
+                    $(".videoContainer").removeClass("hidden");
+                    $(".screenvideo").append('<source src="{{ file.path }}" type="video/ogg">');
+                    console.log("{{ file.path }}");
+                });
+            </script>
+        {% endif %}
+    {% else %}
+        {% if file.path contains 'assets/screenshot' %}
+            <script>
+            (".iphoneScreen").removeClass("hidden");
+            </script>
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+
+
+
+
+<!--
+<div class="videoContainer">
+    <video autoplay="autoplay" controls="controls">
+        {% if video.extname == ".ogg" %}
+        <source src="{{ video.path }}" type="video/ogg">
+        {% endif %}
+
+        {% if video.extname == ".mov" %}
+        <source src="{{ video.path }}" type="video/mp4">
+        {% endif %}
+    </video>
+</div>   
+
+-->

_includes/videoembed.html

@@ -16,16 +16,16 @@
                             </clipPath>
                         </svg>
 
-                        <div class="videoContainer hide">
-                            <video autoplay="autoplay" controls="controls">
-                                <source src="" type="video/ogg">
-                                <source src="" type="video/mp4">
+                        <div class="videoContainer hidden">
+                            <video class="screenvideo" autoplay="autoplay" controls="controls">
+                                <!--<source src="assets/videos/yourvideo.ogg" type="video/ogg">
+                                <source src="assets/videos/yourvideo.mov" type="video/mp4">-->
                             </video>
                         </div>  
 
-                        <img class="iphoneScreen hide" src="{{ image.path }}" alt="">
+                        <img class="iphoneScreen hidden" src="{{ image.path }}" alt="">
 
-                        {% include videoembed.html %}
+                        {% include screencontent.html %}
 
                     </div>
                     <div class="appInfo">

_layouts/default.html

@@ -454,6 +454,6 @@ footer {
 	display: flex;
 }
 
-.hide {
+.hidden {
 	visibility: hidden;
 }