Hosted video support in video section (Shopify#2248)

* New hosted video setting and liquid improvements * Setting and content updates * Settings updates * More setting/content changes * Another one * Fix mute and border radius * Aspect ratio fixes and general improvements * Safari autoplay fix * Update no-js experience * Update 20 translation files * Whitespace * Prevent no-js autoplay --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Gravytrain-UK · Feb 21, 2023 · 8ee9cca · 8ee9cca
1 parent 3bae11b
commit 8ee9cca
Show file tree

Hide file tree

Showing 26 changed files with 547 additions and 112 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2909,7 +2909,9 @@ details-disclosure > details {
 
 .content-container--full-width,
 .global-media-settings--full-width,
-.global-media-settings--full-width img {
+.global-media-settings--full-width img,
+.global-media-settings--full-width video,
+.global-media-settings--full-width iframe {
   border-radius: 0;
   border-left: none;
   border-right: none;

diff --git a/assets/component-deferred-media.css b/assets/component-deferred-media.css
@@ -7,6 +7,7 @@
   height: 100%;
   width: 100%;
   overflow: hidden;
+  border-radius: calc(var(--border-radius) - var(--border-width));
 }
 
 .media > .deferred-media__poster {
@@ -45,6 +46,11 @@
   border-radius: calc(var(--media-radius) - var(--media-border-width));
 }
 
+.global-media-settings--full-width .deferred-media__poster,
+.global-media-settings--full-width .deferred-media__poster:is(:focus, :focus-visible) {
+  border-radius: 0;
+}
+
 /* outline styling for Windows High Contrast Mode */
 @media (forced-colors: active) {
   .deferred-media__poster:focus {

diff --git a/assets/global.js b/assets/global.js
@@ -190,7 +190,7 @@ class QuantityInput extends HTMLElement {
       const max = parseInt(this.input.max);
       const buttonPlus = this.querySelector(".quantity__button[name='plus']");
       buttonPlus.classList.toggle('disabled', value >= max);
-    } 
+    }
   }
 }
 
@@ -553,6 +553,10 @@ class DeferredMedia extends HTMLElement {
       this.setAttribute('loaded', true);
       const deferredElement = this.appendChild(content.querySelector('video, model-viewer, iframe'));
       if (focus) deferredElement.focus();
+      if (deferredElement.nodeName == 'VIDEO' && deferredElement.getAttribute('autoplay')) {
+        // force autoplay for safari
+        deferredElement.play();
+      }
     }
   }
 }

diff --git a/assets/video-section.css b/assets/video-section.css
@@ -1,6 +1,11 @@
 .video-section__media {
+  --ratio-percent: 56.25%;
   position: relative;
-  padding-bottom: 56.25%;
+  padding-bottom: calc(var(--ratio-percent) - var(--media-border-width));
+}
+
+.video-section__media.global-media-settings--full-width {
+  padding-bottom: var(--ratio-percent);
 }
 
 .video-section__media.deferred-media {
@@ -21,8 +26,17 @@
 }
 
 .video-section__poster,
-.video-section__media iframe {
+.video-section__media iframe,
+.video-section__media video {
   position: absolute;
   width: 100%;
   height: 100%;
 }
+
+.video-section__media video {
+  background: #000000;
+}
+
+.video-section__media.media-fit-cover video {
+  object-fit: cover;
+}
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "Zadejte adresu URL na YouTube nebo Vimeo",
-          "info": "Video se přehrává na stránce."
+          "info": "Zadejte adresu URL z YouTube nebo Vimea"
         },
         "description": {
           "label": "Alternativní text videa",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Nastavit plnou šířku sekce"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Přehrát video jako smyčku"
+        },
+        "header__1": {
+          "content": "Video hostované Shopify"
+        },
+        "header__2": {
+          "content": "Nebo vložte video přes URL"
+        },
+        "header__3": {
+          "content": "Styl"
+        },
+        "paragraph": {
+          "content": "Zobrazí se v případě, že není vybráno žádné video hostované Shopify."
         }
       },
       "presets": {

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "Webadresse",
-          "placeholder": "Brug en YouTube- eller Vimeo-webadresse",
-          "info": "Video afspiller på siden."
+          "info": "Brug en YouTube- eller Vimeo-webadresse"
         },
         "description": {
           "label": "Alternativ tekst til video",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Gør afsnittet til fuld bredde"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Afspil video i loop"
+        },
+        "header__1": {
+          "content": "Video hostet af Shopify"
+        },
+        "header__2": {
+          "content": "Eller integrer video fra webadresse"
+        },
+        "header__3": {
+          "content": "Stil"
+        },
+        "paragraph": {
+          "content": "Vises, når der ikke er valgt en video, der er hostet af Shopify."
         }
       },
       "presets": {

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "YouTube- oder Vimeo-URL verwenden",
-          "info": "Video wird auf der Seite abgespielt."
+          "info": "YouTube- oder Vimeo-URL verwenden"
         },
         "description": {
           "label": "Video-Alt-Text",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Abschnitt über die gesamte Breite"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Videoschleife abspielen"
+        },
+        "header__1": {
+          "content": "Von Shopify gehostetes Video"
+        },
+        "header__2": {
+          "content": "Oder Video von URL einbetten"
+        },
+        "header__3": {
+          "content": "Stil"
+        },
+        "paragraph": {
+          "content": "Wird angezeigt, wenn kein von Shopify gehostetes Video ausgewählt wurde."
         }
       },
       "presets": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2837,10 +2837,27 @@
         "cover_image": {
           "label": "Cover image"
         },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Play video on loop"
+        },
+        "header__1": {
+          "content": "Shopify-hosted video"
+        },
+        "header__2": {
+          "content": "Or embed video from URL"
+        },
+        "header__3": {
+          "content": "Style"
+        },
+        "paragraph": {
+          "content": "Shows when no Shopify-hosted video is selected."
+        },
         "video_url": {
           "label": "URL",
-          "placeholder": "Use a YouTube or Vimeo URL",
-          "info": "Video plays in the page."
+          "info": "Use a YouTube or Vimeo URL"
         },
         "description": {
           "label": "Video alt text",

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "Utiliza una URL de YouTube o Vimeo",
-          "info": "El video se reproduce en la página."
+          "info": "Usar URL de YouTube o Vimeo"
         },
         "description": {
           "label": "Texto alternativo del video",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Definir ancho completo en sección"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Reproducir video en bucle"
+        },
+        "header__1": {
+          "content": "Video alojado en Shopify"
+        },
+        "header__2": {
+          "content": "O incrustar video a partir de una URL"
+        },
+        "header__3": {
+          "content": "Estilo"
+        },
+        "paragraph": {
+          "content": "Se muestra cuando no se seleccionó ningún video alojado en Shopify."
         }
       },
       "presets": {

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL-osoite",
-          "placeholder": "Käytä YouTube- tai Vimeo-linkkiä",
-          "info": "Video toistetaan sivulla."
+          "info": "Käytä YouTube- tai Vimeo-linkkiä"
         },
         "description": {
           "label": "Videon vaihtoehtoinen teksti",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Tee osiosta täysleveä"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Toista video silmukkatoistona"
+        },
+        "header__1": {
+          "content": "Shopifyn isännöimä video"
+        },
+        "header__2": {
+          "content": "Tai sulauta video URL-osoitteesta"
+        },
+        "header__3": {
+          "content": "Tyyli"
+        },
+        "paragraph": {
+          "content": "Näytetään, kun mitään Shopifyn isännöimää videota ei ole valittu."
         }
       },
       "presets": {

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "Utiliser une URL YouTube ou Vimeo",
-          "info": "La vidéo est lue sur la page."
+          "info": "Utilisez une URL YouTube ou Vimeo"
         },
         "description": {
           "label": "Texte alternatif de la vidéo",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Rendre la section pleine largeur"
+        },
+        "video": {
+          "label": "Vidéo"
+        },
+        "enable_video_looping": {
+          "label": "Lire la vidéo en boucle"
+        },
+        "header__1": {
+          "content": "Vidéo hébergée par Shopify"
+        },
+        "header__2": {
+          "content": "Ou vidéo intégrée à partir d’une URL"
+        },
+        "header__3": {
+          "content": "Style"
+        },
+        "paragraph": {
+          "content": "Montre quand aucune vidéo hébergée par Shopify n’est sélectionnée."
         }
       },
       "presets": {

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "Utilizza un URL YouTube o Vimeo",
-          "info": "Il video viene riprodotto nella pagina."
+          "info": "Utilizza un URL YouTube o Vimeo"
         },
         "description": {
           "label": "Testo alternativo del video",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "Rendi sezione a larghezza intera"
+        },
+        "video": {
+          "label": "Video"
+        },
+        "enable_video_looping": {
+          "label": "Riproduci il video in loop"
+        },
+        "header__1": {
+          "content": "Video ospitato da Shopify"
+        },
+        "header__2": {
+          "content": "Oppure incorpora il video da URL"
+        },
+        "header__3": {
+          "content": "Stile"
+        },
+        "paragraph": {
+          "content": "Viene mostrato quando non viene selezionato nessun video ospitato da Shopify."
         }
       },
       "presets": {

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -2340,8 +2340,7 @@
         },
         "video_url": {
           "label": "URL",
-          "placeholder": "YouTubeやVimeoのURLを使う",
-          "info": "ページ内で動画を再生します。"
+          "info": "YouTubeやVimeoのURLを使う"
         },
         "description": {
           "label": "動画の代替テキスト",
@@ -2353,6 +2352,24 @@
         },
         "full_width": {
           "label": "セクションを全幅にする"
+        },
+        "video": {
+          "label": "ビデオ"
+        },
+        "enable_video_looping": {
+          "label": "ビデオをループ再生する"
+        },
+        "header__1": {
+          "content": "Shopifyがホストするビデオ"
+        },
+        "header__2": {
+          "content": "または、URLからビデオを埋め込む"
+        },
+        "header__3": {
+          "content": "スタイル"
+        },
+        "paragraph": {
+          "content": "Shopifyがホストするビデオが選択されていない場合に表示されます。"
         }
       },
       "presets": {