From 952595090badbd00d3f89990eab106928582a4e5 Mon Sep 17 00:00:00 2001
From: Karel-Jan Van Haute <karel-jan@statik.be>
Date: Thu, 18 Apr 2024 11:22:37 +0200
Subject: [PATCH] Use responsive images / sourceset for Youtube thumbnails?
 Fixes #297

---
 templates/_site/_snippet/_content/_blocks/_textVideo.twig | 7 ++++---
 templates/_site/_snippet/_content/_blocks/_video.twig     | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/templates/_site/_snippet/_content/_blocks/_textVideo.twig b/templates/_site/_snippet/_content/_blocks/_textVideo.twig
index a8b49b4e..74cfbb87 100644
--- a/templates/_site/_snippet/_content/_blocks/_textVideo.twig
+++ b/templates/_site/_snippet/_content/_blocks/_textVideo.twig
@@ -14,19 +14,20 @@
                             <picture>
                                 {% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %}
                                     <source srcset="{{ optimizedImage.srcsetWebP() }}"
-                                            sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 100vw, (min-width: 640px) and (max-width: 767px) 100vw, (min-width: 768px) and (max-width: 1023px) 496px, (min-width: 1024px) and (max-width: 1279px) 624px, (min-width: 1280px) 736px"
+                                            sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                             type="image/webp"/>
                                 {% endif %}
                                     <img src="{{ optimizedImage.placeholderBox() }}"
                                         srcset="{{ optimizedImage.srcset() }}"
-                                        sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 100vw, (min-width: 640px) and (max-width: 767px) 100vw, (min-width: 768px) and (max-width: 1023px) 496px, (min-width: 1024px) and (max-width: 1279px) 624px, (min-width: 1280px) 736px"
+                                        sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"
                                         width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"
                                         alt=""
                                         class="js-bg-src" loading="lazy"/>
                             </picture>
                         {% else %}
                             {% if embed.type == "youtube" %}
-                                <img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src"/>
+                                <img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src" srcset="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg 1280w, https://i.ytimg.com/vi/{{embed.id}}/sddefault.jpg 640w, https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg 480w, https://i.ytimg.com/vi/{{embed.id}}/mqdefault.jpg 320w"
+                            sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px"/>
                             {% endif %}
                             {% if embed.type == "vimeo" %}
                                 <img src="https://vumbnail.com/{{embed.id}}.jpg" alt="" class="js-bg-src"/>
diff --git a/templates/_site/_snippet/_content/_blocks/_video.twig b/templates/_site/_snippet/_content/_blocks/_video.twig
index 384cc20b..5aae8c48 100644
--- a/templates/_site/_snippet/_content/_blocks/_video.twig
+++ b/templates/_site/_snippet/_content/_blocks/_video.twig
@@ -10,19 +10,20 @@
                     <picture>
 						{% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %}
 							<source srcset="{{ optimizedImage.srcsetWebP() }}"
-									sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 448px, (min-width: 640px) and (max-width: 767px) 608px, (min-width: 768px) and (max-width: 1023px) 736px, (min-width: 1024px) and (max-width: 1279px) 662px, (min-width: 1280px) 832px"
+									sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
 									type="image/webp"/>
 						{% endif %}
 							<img src="{{ optimizedImage.placeholderBox() }}"
 								srcset="{{ optimizedImage.srcset() }}"
-								sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 639px) 448px, (min-width: 640px) and (max-width: 767px) 608px, (min-width: 768px) and (max-width: 1023px) 736px, (min-width: 1024px) and (max-width: 1279px) 662px, (min-width: 1280px) 832px"
+								sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"
 								width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}"
 								alt=""
 								class="js-bg-src" loading="lazy"/>
 					</picture>
                 {% else %}
                     {% if embed.type == "youtube" %}
-                        <img src="https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg" alt="" class="js-bg-src"/>
+                        <img src="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg" alt="" class="js-bg-src" srcset="https://i.ytimg.com/vi/{{embed.id}}/maxresdefault.jpg 1280w, https://i.ytimg.com/vi/{{embed.id}}/sddefault.jpg 640w, https://i.ytimg.com/vi/{{embed.id}}/hqdefault.jpg 480w, https://i.ytimg.com/vi/{{embed.id}}/mqdefault.jpg 320w"
+                            sizes="(max-width: 479px) 100vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 526px, (min-width: 980px) and (max-width: 1199px) 632px, (min-width: 1200px) 779px"/>
                     {% endif %}
                     {% if embed.type == "vimeo" %}
                         <img src="https://vumbnail.com/{{embed.id}}.jpg" alt="" class="js-bg-src"/>