Refactor responsive video handling and improve performance

assets/css/screen.css

@@ -1275,6 +1275,8 @@ html.no-infinite-scroll .pagination {
     grid-column: wide-start / wide-end;
     width: 100%;
     margin: max(6.4vmin, 40px) 0 0;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
 }
 
 .image-full .article-image {
@@ -1567,6 +1569,20 @@ except for when immediately preceeded by a heading */
     width: 100%;
 }
 
+/* Responsive video embeds - no JavaScript needed */
+.kg-embed-card iframe[src*="youtube.com"],
+.kg-embed-card iframe[src*="youtube-nocookie.com"],
+.kg-embed-card iframe[src*="player.vimeo.com"],
+.kg-embed-card iframe[src*="kickstarter.com"],
+.gh-content iframe[src*="youtube.com"],
+.gh-content iframe[src*="youtube-nocookie.com"],
+.gh-content iframe[src*="player.vimeo.com"],
+.gh-content iframe[src*="kickstarter.com"] {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto;
+}
+
 /* This keeps small iamges centered */
 .kg-image-card img {
     margin: auto;

assets/js/init.js

@@ -0,0 +1,12 @@
+// Initialize mobile menu
+(function() {
+    // Mobile Menu Trigger
+    var burger = document.querySelector('.gh-burger');
+    if (burger) {
+        burger.setAttribute('aria-expanded', 'false');
+        burger.addEventListener('click', function() {
+            var isOpen = document.body.classList.toggle('gh-head-open');
+            burger.setAttribute('aria-expanded', String(isOpen));
+        });
+    }
+})();

author.hbs

@@ -21,6 +21,8 @@
                     sizes="(max-width: 1000px) 400px, 800px"
                     src="{{img_url cover_image size="m"}}"
                     alt="{{title}}"
+                    fetchpriority="high"
+                    loading="eager"
                 />
             </div>
             {{/if}}
@@ -29,7 +31,7 @@
             <div class="post-card-content-link">
 
                 {{#if profile_image}}
-                    <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+                    <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" loading="eager" />
                 {{/if}}
 
                 <header class="post-card-header">

default.hbs

@@ -9,7 +9,7 @@
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    {{!-- Preload scripts --}}
+    {{!-- Preload critical resources to reduce render-blocking --}}
     <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
     <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
 
@@ -95,23 +95,8 @@
     {{> "lightbox"}}
 {{/is}}
 
-{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
-<script
-    src="https://code.jquery.com/jquery-3.5.1.min.js"
-    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
-    crossorigin="anonymous">
-</script>
-<script src="{{asset "built/casper.js"}}"></script>
-<script>
-$(document).ready(function () {
-    // Mobile Menu Trigger
-    $('.gh-burger').click(function () {
-        $('body').toggleClass('gh-head-open');
-    });
-    // FitVids - Makes video embeds responsive
-    $(".gh-content").fitVids();
-});
-</script>
+{{!-- Scripts - handle responsive videos, infinite scroll, floating headers, and galleries --}}
+<script src="{{asset "built/casper.js"}}" defer></script>
 
 {{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
 {{ghost_foot}}

index.hbs

@@ -16,6 +16,8 @@ into the {body} of the default.hbs template --}}
                 sizes="100vw"
                 src="{{img_url @site.cover_image size="xl"}}"
                 alt="{{@site.title}}"
+                fetchpriority="high"
+                loading="eager"
             />
         {{/if}}
     {{/if}}

post.hbs

@@ -37,7 +37,7 @@ into the {body} tag of the default.hbs template --}}
                 <li class="author-list-item">
                     {{#if profile_image}}
                     <a href="{{url}}" class="author-avatar" aria-label="Read more of {{name}}">
-                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="eager" />
                     </a>
                     {{else}}
                     <a href="{{url}}" class="author-avatar author-profile-image" aria-label="Read more of {{name}}">{{> "icons/avatar"}}</a>
@@ -73,6 +73,8 @@ into the {body} tag of the default.hbs template --}}
                     sizes="(min-width: 1400px) 1400px, 92vw"
                     src="{{img_url feature_image size="xl"}}"
                     alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                    fetchpriority="high"
+                    loading="eager"
                 />
                 {{#if feature_image_caption}}
                     <figcaption>{{feature_image_caption}}</figcaption>