Working on a way of automatically adding video

Author: emilbaehr

_config.yml

@@ -22,11 +22,12 @@ your_city                                 : Copenhagen
 
 # Icon, screenshot and header image
 app_icon                                  : # assets/appicon.png                      # Automatically populates if not set and if iOS app ID is set.  Otherwise enter path to icon file manually.
-app_video_mov                             : # assets/yourvideo.mov                    # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436. Use format .mov for Safari support.
-app_video_ogg                             : # assets/yourvideo.ogg                    # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436. Use format .ogg for Chrome support.
-app_screenshot                            : assets/yourscreenshot.png                 # Replace with alternateive image path. Does not automatically populate since Apple does not provide iPhone X/XS/XR screenshots in their iTunes lookup API.
 header_image                              : assets/headerimage.png                    # Replace with alternative image path or image URL.
-device_color                              : black                                     # Set to: blue, black, yellow, coral or white 
+device_color                              : black                                     # Set to: blue, black, yellow, coral or white.
+
+# Video
+enable_video_preview                      : true                                      # Set to true to enable video preview instead of a static screenshot.
+                                                                                      # Add .ogg and .mov video files to assets/videos/
 
 # Social Links                                                                        # Enter usernames and email address. If set, they will be presented as links in the footer.
 facebook_username                         :                                           

_includes/videoembed.html

@@ -0,0 +1,37 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+
+{% for video in site.static_files %}
+{% if video.path contains 'assets/videos' %}
+
+<script>
+
+
+    $(function() {
+        console.log("Hello, World!");
+    });
+
+</script>
+
+{% 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>   
+
+        -->

_layouts/default.html

@@ -16,21 +16,16 @@
                             </clipPath>
                         </svg>
 
-                        {% if site.app_video_mov or site.app_video_ogg %}
-                            <div class="videoContainer">
-                                <video autoplay="autoplay" controls="controls">
-                                    <source src="{{ site.app_video_mov }}" type="video/mp4">
-                                    <source src="{{ site.app_video_ogg }}" type="video/mp4">
-                                </video>
-                            </div>
+                        <div class="videoContainer hide">
+                            <video autoplay="autoplay" controls="controls">
+                                <source src="" type="video/ogg">
+                                <source src="" type="video/mp4">
+                            </video>
+                        </div>  
+                        
+                        <img class="iphoneScreen hide" src="{{ image.path }}" alt="">
 
-                        {% else %}
-                            {% for image in site.static_files %}
-                                {% if image.path contains 'assets/screenshot' %}
-                                <img class="iphoneScreen" src="{{ image.path }}" alt="">
-                                {% endif %}
-                            {% endfor %}
-                        {% endif %}
+                        {% include videoembed.html %}
 
                     </div>
                     <div class="appInfo">

_sass/layout.scss

@@ -251,16 +251,16 @@ nav > ul li a:active {
 	-webkit-clip-path: url(#screenMask);
 	clip-path: url(#screenMask);
 	margin-left: 26px;
-	margin-top: 22px;
+	margin-top: 23px;
 }
 
 .videoContainer {
 	width: 349px;
 	height: 755px;
 	-webkit-clip-path: url(#screenMask);
 	clip-path: url(#screenMask);
-	margin-left: 28px;
-	margin-top: 3px;
+	margin-left: 26px;
+	margin-top: 23px;
 }
 
 .videoContainer > video {
@@ -283,13 +283,13 @@ nav > ul li a:active {
 	.videoContainer {
 		width: 322px;
 		height: 698px;
-		margin-left: 28px;
-		margin-top: 3px;
+		margin-left: 24px;
+		margin-top: 22px;
 	}
 
 	.videoContainer > video {
 		width: 322px;
-		height: 398px;
+		height: 698px;
 	}
 
 } 
@@ -311,12 +311,19 @@ nav > ul li a:active {
 		-webkit-clip-path: url(#screenMask);
 		clip-path: url(#screenMask);
 		margin: 0px;
-		margin-top: 16px;
+		margin-top: 17px;
 	}
 
 	.videoContainer {
 		width: 226px;
 		height: 488px;
+		margin-left: 0px;
+		margin-top: 17px;
+	}
+
+	.videoContainer > video {
+		width: 226px;
+		height: 488px;
 	}
 
 } 
@@ -445,4 +452,8 @@ footer {
 .footerIcons {
 	padding-bottom: 100px;
 	display: flex;
+}
+
+.hide {
+	visibility: hidden;
 }